Using the Google Maps API in React
Tags: react, webdev, googlemaps, api
Published: 2021-05-23 14:54:51

The Google Maps JavaScript API is a great way to include an interactive map on your website and gives you heaps of options for controlling and customising it. In this post, I'll take you through how to create a map with multiple, customised markers and info windows which appear on click.

We'll end up with something like this -

![final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivy5ys3r0kwkj3fi787l.jpg)

To do this exercise, you'll need your own API key from Google. Since I only really want to concentrate on getting the map working in React, I'm going to assume you already have one. If you don't, and don't know how to get one, <a href="https://www.youtube.com/watch?v=YKI3nE6pqvM">this video</a> shows you how.

We'll start off with a basic React app. You can find the starting code <span style="color:#f50b0b" class="has-inline-color"><a href="https://github.com/LauraToddCode/using-google-maps/tree/starter-code/src">here</a></span>.

Create a new file called 'properties.json' this is where we'll keep the data for each of the properties we want to show on our map.

![json properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6x1zwto1anm24slrtnrq.png)

Next, install 'react-google-maps'.

![install react google maps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5q9eqch6q880dlwm1rs1.png)

Now we need to create our Map component. Make a 'components' folder and inside, add a new file called 'Map.js'. In this file, import 'GoogleMap', 'withScriptjs', 'withGoogleMap', 'Marker' and 'InfoWindow' from 'react-google-maps'. Then create two functional components - 'MapComponent' and 'Map'. Only export 'Map'.

![import react google map tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3qfn7c8l1gkkjh0pl1p.png)

Underneath the 'MapComponent' we need to use the 'withScriptjs' and 'withGoogleMap' functions to wrap the 'MapComponent'. We can then return the 'WrappedMap' inside the 'Map' component.

![wrap map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8591nfo2z8q4g7htgk4q.png)

Now, go back to the 'App.js' file and import your Map component. Render the map component wrapped in two 'divs' like so -

![add divs around Map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hle9pxxzak7yd3w3b0pc.png)

Then, add the following CSS to the stylesheet to display the map at 800 x 500px (or whatever size you'd like).

![add styling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in7aoskqqjwdimh1rtuh.png)

Next we need to pass in some properties to the wrapped map. Firstly, the 'googleMapURL' property should be set to `https://maps.googleapis.com/maps/api/js? v=3.exp&libraries=geometry,drawing,places&amp;key=[YOUR_API_KEY]` with your own API key replacing [YOUR_API_KEY].

Then, the 'loadingElement', 'containerElement' and 'mapElement' should all be styled to 100% height to ensure that they take up the whole of their container.

![add properties to wrapped map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mh9j8nc0zsscak0p4id.png)

Now let's import our 'properties.json' file as 'properties' and go back to our 'MapComponent' component.

We can add in some `<GoogleMap>` tags and enter the 'defaultZoom' and 'defaultCenter' properties. These are pretty self explanatory - 'defaultZoom' is how far the map is zoomed in when it first renders and 'defaultCenter' is the co-ordinates that the map centers on when it first renders.

![add properties to Google Map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28o87uj8p1dydmwtfksb.png)

Next, we can use the values from our json file to create the markers on our map.

Inside the `<GoogleMap>` tags, use the map() array method to render a `<Marker>` for each property, grabbing the id value and the lng and lat values for each one. If you run your app at this point, you should see the default red Google Maps markers.

![map markers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az5s90yz9ktdrr06ieub.png)

Next, we can add our own custom icons as markers by adding the 'icon' property. Set the 'url' for your icon and set the 'scaledSize' to 'new window.google.maps.Size(25, 25)'. This will make your icons 25px x 25px.

![add custom icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0p6s0tv2339vwffni18.png)

Finally, we can set up our info windows. In order to do this, we need to know which of the markers is being clicked so that we know which of the windows to show. So lets add an onClick event listener to our markers and use useState to set the selected property.

![add on click to markers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j1g493zpgh37ksmr5y0.png)

Now we can use our 'selectedProperty' to render an <InfoWindow> with information about our selected property.

![render info windows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5hb5qsf7wx4ltfh5kzf.png)

That's it! Now you have a map, with multiple custom markers and info windows which display on click.

You can check your final code <a href="https://github.com/LauraToddCode/using-google-maps/tree/master/src">here</a>.