React Google Map with a Custom Pin Marker

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

Prerequisites

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

Preface

This article is going to cover how to set up and implement Google Maps React custom marker and also how to customize the marker pin.

We will follow the steps below in order:-

1. Getting Google API key of Google Maps.
2. Installation of Google Map Library to React.
3. Implementation of the Google Maps.
4. Customization of markers.

Now let’s start the integration process.

Get Google Map API Key

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

4. Now click on Create Credentials and save it.

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

Related read: Branch Deep Linking in ReactJs

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 Maps

So first we are going to build a map component. Its purpose is to render the data inside of the Google Maps 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 locations for that we are using the “Marker” class provided by the library that we installed. We need to pass position props to mark 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 to the map it looks like the red default pin that we see in Google Maps. 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:

1. Size the marker pin
2. 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 the icon prop and get the new pin on the map, we need to manage it to locate it in the right location. 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

1. 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.
2. When you’re working with a map, then the browser needs to access location service so for that we need secure connection HTTPS.