Hi everyone, my name is Hieu. Nice to come back to write another ReactJs article with the topic of integrating google map api into reactjs. Right and always let’s go to the article.

1. Opening:

Surely you have seen google maps integrated into IoT applications such as tracking smart devices, monitoring vehicle journeys like Uber, Grab… Looking at them, it seems difficult, but It’s not too difficult to learn gradually. Google map has provided us with a custom serving API that integrates into our application quite easily. From there we can perform tasks such as marking the store address, monitoring or viewing directions right on the application without having to go to the official page of google map. Google map also provides api for most devices like adnroid, ios, embed api or on website with Maps Javascript API. You can check it out right here : https://developers.google.com/maps/documentation. For pure javascript, everyone can follow the instructions at the homepage. And today, I will introduce a package that helps to integrate google map api into ReactJS which is react google maps.

2. Settings:

I already have a pre-initialized project with npx create-react-app. If anyone wants to learn more or re-read about ReactJs, everyone should have a look here: Similar to other packages using npm. We can install react-google-maps using the command

or

Next we will create a component or an instance for Map. I will create a components folder and add the Map.js file as follows:

Here we see that two HOCs are required, withScriptjs and withGoogleMap, for our map to run.

The props I pass into GoogleMap include:

• defaultZoom: the initial zoom of the map, the larger the number, the closer the zoom will be
• defaultCenter: Default where the original midpoint of the map is located. You can choose the coordinates when you first open the map with a coordinate pair including : lat and lng.

For those of you who don’t know what lat and lng are, I’ll introduce you to these two parameters. For each location on the corresponding map we will have a pair of coordinates including longitude as Longitude and latitude as Latitude corresponding to lat and lng. Google map will determine the exact coordinates for us by passing in this coordinate pair.

Next in the App.js file we will add this component:

Here we need to create an API Key on https://console.cloud.google.com/google/maps-apis/api-list?project=master-gecko-318603 and enable Maps JavaScript API . We’ll also add some props here:

• googleMapURL: url of google map , remember to add the key that has been set up to run it.
• loadingElement: insert loading effect before loading the map.
• containerElement, mapElement : is the div containing the map.

Our result will be like this:

3. Some basic uses:

Marker:

The marker will mark a location on the map based on the given lat, lng. To use markers we use the Marker component of react-google-maps. below I will create a marker as well as for defaultCenter in Hanoi.

Above I customize the marker with an icon that is an image file. the scale size of the marker and most importantly the position of the marker. Results are below.

InfoBox:

Infobox is an annotation dialog for marker . to add infobox we use :

Because we put InfoBox in Marker so we don’t need to pass position props to InfoBox. InfoBox gets coordinates from Marker itself. pictures as below:

Polyline:

Polyline is the line connecting the Marker points together. Usually to track the path or distance of points. To use Polyline we need 2 or more positions.