Writing a Google Maps React Component

Google has a lot of APIs available for use. One of the most used is the Google Maps API. When I had first tried integrating the API with ReactJS, I came across a lot of difficulties. There was a lot of material available over the internet but nothing accurate. A lot of them lacked proper documentation. So this blog of mine is to help beginners understand implementation of adding Google Maps to a react app. The end product of this post would be :

Prerequisites would be :

Create a react app using the command :

Navigate to the react-google-maps directory. In this directory run the command :

Now, within the src folder create a folder named components and within this folder create a file named marker.js. Run the app using the command below and see if the set-up is proper.

After successful set-up, we can now proceed to add the google map in the webpage. In marker.js file, add the following code :

Now in App.js file make the following changes :

For setting the height and width of the map, add the following in App.css.

Run the app and check if the code is working properly.

Now, the marker will be added to the map. This marker will mark the co-ordinates of the map centre and a text on hover will be displayed. Add the following code to marker.js :

This function creates a marker. Now add markerText to the state of the component :

Add the onGoogleApiLoaded property to GoogleMapReact as follows:

Run the app and you should see the following:

Here, a map with a marker has been successfully created. The marker shows the city name when hovered over. We can also add dynamic marker loading as the city changes. For example here, I have created a drop-down from which cities can be selected. The map as well as the marker recenter according to the city selected. The next section is a guide for the implementation of dynamic map and marker loading.

For the cities to be selected from the drop-down, I have created an array with city names and their positions. The array is as follows:

Let us now create the drop-down that is to be displayed:

Let us now code the changeMapCenter() method :

Update renderMarkers() as follows:

Also, the state needs to be updated :

The drop-down can be styled a bit. Add the following code to App.css.

Run the app to check if it works properly. At the end, we have this:

Throughout this exercise we saw how to add Google Maps to React and add a marker on it. We learnt one of the ways to implement this. Hope this post has helped the readers in knowing Google Maps and ReactJS integration.

Related posts:

Artificial intelligence (AI) has been used to make major breakthroughs over the past few years in industries such as health care, cybersecurity, and logistics. It has improved our daily lives with…