tomchentw/react-google-maps

import React,{Component} from "react"
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker} from "react-google-maps"
import {MarkerClusterer} from 'react-google-maps/lib/components/addons/MarkerClusterer'

const Data=[
    { site:'DXL01234',lat:32.884254, lng:-97.276890,visible:true},
    { site:'DXL01238',lat:32.883707, lng:-97.275264,visible:true}
]


const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={14}
    defaultCenter={{lat:props.center.lat,lng:props.center.lng}}
  >
  <MarkerClusterer
      averageCenter
      enableRetinaIcons
      gridSize={50}
    >
        {props.data.map(pin=>(
          <Marker 
            key={pin.site}
            defaultTitle={pin.site}
            position={{lat:pin.lat, lng:pin.lng}}
            defaultAnimation={window.google.maps.Animation.DROP}
            visible={pin.visible}
            onClick={props.onMarkerclick}
          />
        ))}

    </MarkerClusterer>


  </GoogleMap>
)

class TheMap extends Component {
  constructor(props){

    super(props);
    this.state={
      center:{ lat: Data[0].lat, lng:Data[0].lng},
      data:[]
    }      
  } 
  componentDidMount(){
    this.setState({
        data:Data
    })
  }
  onMarkerclick(e){

    const label=e.getTitle()
    console.log(label)
  }
  render() {
    return (
      <MyMapComponent
        center={this.state.center}
        data={this.state.data}
        click={this.onMarkerclick}      
      />
    )
  }
}

export default TheMap