![]() ![]() At the bottom of the file, export the Map component: export default Map Using the Map componentīecause the Map component is just a React component, we can go ahead and use it anywhere we like. All we need to do now is export the Map component and include it on the contact page. Note that the styling for LocationPin is already included in map.css, but you can style it however you like. I’m sure this component is pretty self-explanatory. I’m using Google’s Amphitheatre address, so I did a quick search and got the following values: const location = ) => ( This means a quick Google search for the longitude and latitude values of your business address. Before we start writing any code, though, we have to install the google-map-react package by running the following command: yarn add google-map-reactĪfter installing the package, we’ll also need something else: the coordinates of our business address. Inside this file, we’ll write the code for the map component and the address pin. Run the command above to create a new file in the /components folder. Map.jsx mkdir src/components/map & touch src/components/Map.jsx Embed the map component into the contact page.Create another React component to mark the address on the map ( LocationPin.jsx).Create a React component to hold the map ( Map.jsx).Here are the steps we’re going to follow: 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. 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. 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.
0 Comments
Leave a Reply. |