#Putting business on google maps code#

To reiterate, I will not go through all the code for the contact page, as this article is focused mainly on integrating Google Map into a React project. The final version of what we’ll be building looks like this: Once you have all these ready, we can start building.

Note that you will need to set up a billing account to get rid of the limitations and watermark that comes with it.

#Putting business on google maps for free#

For the rest of the tutorial, we’ll create a React component to hold the Google Map and embed it into the contact page.Īs for the Google Maps API key, you can get one for free by following the instructions on the Google Maps documentation. You should see a sample contact page without Google Maps integrated.

#Putting business on google maps install#

Run the following command to clone the repo to your local machine: git clone Īfter cloning, run npm install to install all the project dependencies, then run npm run start to open the project in a new tab. I have set up a sample repository that you can clone to follow along. If you would like to code along with me, you’ll need the following: Requirements to add Google Maps to your React app The google-map-react team has provided a list of examples you can go through in case you require something a bit more advanced. For this guide, we’ll build a contact page that contains a map displaying the address of the business, as this is the most common use case I’ve encountered. This is just a small list of features made possible by the Google Maps API, and you may have other business requirements. Showcase interesting places around the world.To provide live updates on a shipped item’s location.

To show a route to an event (i.e., a concert or conference).To provide directions to your business address.It is actively maintained and simple enough to use that it is my default go-to for integrating Google Maps in a React project.īefore we start building, however, here are some reasons why you may want to put Google Maps on your website (or web app): This package is a component written over a small set of the Google Maps API, and it allows you to render any React component on the Google Map. You can then use this as a base for other, more complex cases if you desire.īecause of how incredibly powerful and complex Google Maps is, we’ll need the aptly named google-map-react package to help us integrate it into our React app. Indeed, there are a number of reasons why you may choose to integrate Google Maps into your React app, and we’ll be taking a look at one of the most popular ones: displaying your business address. From showing your office location to showing a route a package delivery will take, Google Maps is flexible and powerful enough to handle a wide variety of use cases. The possibilities it allows for are endless and can provide real value to your business and users. We might take it for granted, but Google Maps is a modern miracle in many respects. There’s a quote from British science-fiction writer Arthur Charles Clarke that goes, “Any sufficiently advanced technology is indistinguishable from magic.” Integrating Google Maps with ReactĮditor’s note: This post was reviewed and updated on 5 November 2021. Ovie Okeh Follow Programming enthusiast, lover of all things that go beep.