easy-react-google-maps v1.0.5

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:

import React, { Component } from 'react';
import GMap from '../components/easy-react-google-maps';

/* The only required parameter is the coordinates of the map center.
Let's take facebook as an example. */
const center = {
    lat: 37.485187,
    lng: -122.1544192,
};

/* Style of the container. */
const style = {
    width: '640px',
    height: '480px',
};

/* Only lat and lng are required for marker objects.*/
const markers = [
    {
        lat: 37.485187,
    	lng: -122.1544192,
        title: 'Facebook',
    },
    {
        lat: 37.4828052,
    	lng: -122.1653971,
        title: 'Instagram',
    },
];

const keys = {
    key: YOUR_GOOGLE_API_KEY,
};

class Page extends Component {
    render() {
        return (
            <div style={style}>
                <GMap bootstrapURLKeys={keys} center={center} markers={markers} />
            </div>
        );
    }
}

export default Page;

The two markers will be displayed on the map.

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

API: