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.

Check Out On-Demand Logistic Case Study

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.
create-new-project
Fig. Create Project

4. Now click on Create Credentials and save it.

create-credentials
Fig. Create Credentials

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

copy-api-key
Fig. API key

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);
Google Maps
Fig. Google Maps

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);
Initial Marker
Fig. Initial Marker

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.

Marker Pin
Fig. Marker Pin

Hire a Skilled ReactJS Professional for Your Projects!

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.
coma

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. Write your quaries in the coment section if you have any doubt about how to add google map in React js.

Keep Reading

Keep Reading

Struggling with EHR integration? Learn about next-gen solutions in our upcoming webinar on Mar 6, at 11 AM EST.

Register Now

Let's create something together!