Notes

Learn How To Embed A Google Map In Your React App

This tutorial explains easy methods to embed a Google Map in your React app, the easy means utilizing a library! Yay! In scripting this I give many thanks the blog posts I realized how to do that from (the ReadMe on the google-maps-react library was significantly instructive, together with its companion weblog publish). That stated, I still wished to do that put up - principally to fill within the gaps in the areas that have been unclear for me.


1. We assume you have already got a React app going. Out of your project listing in terminal, run npm install google-maps-react to get began.

2. Get your API Key for Google Maps. As of writing, you possibly can do that here by clicking the large blue button that says “GET A KEY”.


3. Head into the part the place you wish to embed the map. I’ll begin a boring empty react app that solely has boiler plate code in it. My App at the moment appears like this:


To get began I’ll import Map, Marker, and GoogleApiWrapper from ‘google-maps-react’ and wrap the element in the GoogleApiWrapper as I export. Now my code appears to be like like this:


4. At this level, all you must do to add your map is add the Map component in with a prop for the google object. By way of some abstraction offered by the library, the google prop helps the Map load. There are some further optional props you'll be able to present as properly. Which this page ’ll explain next. At this point my code seems to be like this:



and tada, my part renders like this!

5. You can cross further props to your element, including zoom (low numbers are zoomed out and higher zoomed in) - see google documentation on zoom here, and gps coordinates as to the place to center your map. The unique documentation by the library is definitely actually helpful to know all of the props you possibly can add so be happy to take a look at the main points there. I went forward and moved my map to heart over my hometown, and adjusted the zoom and types. Now my code appears to be like like this:



My map now looks like this, resized and properly centered over my delightful hometown.

6. You might observe a warning in your console at this level saying that you’re utilizing an previous model of Maps. You possibly can resolve this by setting a model at the bottom of the page like so:


7. Adding Markers. Add Markers (and InfoWindows!) by adding the part inside your Map part. In the event you don’t set a location for the marker, it will default to the center of the map.

My Website: https://agrtech.com.au/embed-google-map/