easy-react-google-maps

Easy react google maps is a react component for displaying markers and clusters on google maps.

Install:

npm install easy-react-google-maps --save

Sample code:

1import React, { Component } from 'react';
2import GMap from '../components/easy-react-google-maps';
3
4/* The only required parameter is the coordinates of the map center.
5Let's take facebook as an example. */
6const center = {
7    lat: 37.485187,
8    lng: -122.1544192,
9};
10
11/* Style of the container. */
12const style = {
13    width: '640px',
14    height: '480px',
15};
16
17/* Only lat and lng are required for marker objects.*/
18const markers = [
19    {
20        lat: 37.485187,
21    	lng: -122.1544192,
22        title: 'Facebook',
23    },
24    {
25        lat: 37.4828052,
26    	lng: -122.1653971,
27        title: 'Instagram',
28    },
29];
30
31const keys = {
32    key: YOUR_GOOGLE_API_KEY,
33};
34
35class Page extends Component {
36    render() {
37        return (
38            <div style={style}>
39                <GMap bootstrapURLKeys={keys} center={center} markers={markers} />
40            </div>
41        );
42    }
43}
44
45export default Page;

The two markers will be displayed on the map.

If you zoom out, the two markers will become a cluster.

API:

Property	Type	Default	Description
center	object		Center of the map, required.
zoom	number	11	Zoom level.
markers	[{lat, lng}]	[]
clusterLimit	number	99	Number on the cluster will be displayed as limit+ (eg. 99+) when bigger than the limit.
clusterDensity	number	20	How close should two markers be merged as a cluster. (Range: 1 - 100)
markerComponent	ReactComponent		Your customized marker component.
clusterComponent	ReactComponent(num)		Your customized cluster component, should accept a number as property.
onChildClick	([{top, left, ...marker}]) => void		Will be invoked when a marker or cluster is clicked. Arguments are the markers with relative positions to the top-left of the map.
options	object	{}	Google maps options (eg. fullscreenControl, gestureHandling)