React google map with a custom pin marker

Most of the application uses google maps in the application to track down live location or data. As we have many frameworks in the market implementing maps in all those frameworks has a different procedure. And customizing google map and matching it to our application theme is really a challenge, So in this article, we are going to see how to implement google map in React also with the customization of the marker.

Prerequisites

This article assumes that you have practical knowledge about React JS and google API’s. And working with npm libraries.

Preface

This article is going to be covering how to set-up and implement google map in reactJS and also how to customize the marker pin.

We will follow the steps below in order :-

Getting Google API key of google map.
Installation of Google map Library to react.
Implementation of the map.
Customization of markers.

Now let’s start the integration process.

Get google map API key

First login to your google account
Go to the Google Cloud Platform Console.
Now click on create a new project, and create a new project.

React google map with a custom pin marker

Now click on create credentials and save it.

Now just copy your API key and use it in your React Project.

Starting with the development process.

1. Installation

npm i react-google-maps

We’ve installed a third-party library react-google-map in our project. Now we are good at implementing maps.

2. Creating component for google map

So first we are going to build a map component. Its purpose is to render the data inside of the google map component, which comes from the package that we installed. It does not require any extra props, we just need to pass the zoom level of the map and where to center the map that is pretty typical.

import React, { Component } from 'react'
import { Map, GoogleApiWrapper } from 'google-maps-react';
export class MapComponent extends Component {
render() {
return (<div className="map-area">
<Map
google={this.props.google}
zoom={14}
center={{
lat: 47.444,
lng: -122.176
}}
></Map>
</div>);
}
}
export default GoogleApiWrapper({
apiKey: (‘your_api_key’)
})(MapComponent);

3. Adding initial Marker

Now, we are moving to show the marker on the map cause we are using the map in the application definitely to show some location for that we are using the “Marker” class provided by the library that we installed. We need to pass position props to marker it including the latitude and longitude.

E.g:- {lat: 47.444, lng: -122.176}

import React, { Component } from 'react'
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
export class MapComponent extends Component {
render() {
return (<div className="map-area">
<Map
google={this.props.google}
zoom={14}
center={{
lat: 47.444,
lng: -122.176
}}>
<Marker key="marker_1"
position={{
lat: 47.444,
lng: -122.176
}}
/>
</Map>
</div>);
}
}
export default GoogleApiWrapper({
apiKey: (‘your_api_key’)
})(MapComponent);

4. Customize Marker

Now, after adding the marker in the map it looks like the red default pin that we see in google map. So to match it with the application theme we need to customize it, so while customizing it we need to take care of two things:

Size the marker pin
It should point to the right location on the map

<Marker key="marker_1"
icon={{
url: '/custom_marker_pin.svg',
anchor: new google.maps.Point(17, 46),
scaledSize: new google.maps.Size(37, 37)
}}
position={{
lat: 47.444,
lng: -122.176
}}
/>

So we need to pass icon props to the marker. It changes the style of the marker, It replaces the default marker with the image that we are providing in the URL. I recommend using SVG images for Marker pins. But it’s not that easy to pass icon prop and get the new pin on map, we need to manage it to locate it in the right location. Because when we change the image it also changes the size of the marker so using an anchor and scaled size props we can manage it.

Points to remember

You must need a paid API key to work with the map, if you don’t have a paid key then it renders ‘map is under development’ all over the map.
When you’re working with a map, then the browser needs to access location service so for that we need secure connection HTTPS.

Conclusion

From the above article, we covered how to integrate the react-google-map library into our react application and also cover how to customize in the marker pin and set it to an accurate location.

subscribe to our newsletter

About Author

Prasad Yeole

Prasad is a Full-stack developer with around 1.7 years of experience. He is an expert in building Python integrated web applications, Creating REST APIs with well designed, testable and efficient and optimized code. He is having experience in web technologies like ReactJS, JavaScript, etc. He loves to solve technical problems, learn new technologies and helping others.