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 React google maps custom marker in React also with the customization of the marker.
This article assumes that you have practical knowledge about React JS and google API’s. And working with npm libraries.
This article is going to be covering 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:-
Now let’s start the integration process.
4. Now click on create credentials and save it.
5. Now just copy your API key and use it in your React Project.
Also Read: Branch Deep Linking in ReactJs
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.
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);
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);
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:
<Marker key="marker_1" icon={{ url: 'https://cdn.mindbowser.com/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.
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.
What’s on your mind? Tell us a little bit about yourself and your question, and we will be in touch with you within 12 hours
Free eBook on Telemedicine Platform Development: All About Telemedicine
Download Free eBook Now!