map.js

map.js

// don't forget google maps import:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC44mPpaMNvENXryYjHBHzjST1UMnYlARk"></script>

import React, { Component } from 'react'
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps'

class Map extends Component {

	constructor(){
		super()
		this.state = {
			map: null
		}
	}

	mapMoved(){
		// console.log('mapMoved: '+JSON.stringify(this.state.map.getCenter()))
		if (this.props.locationChanged != null)
			this.props.locationChanged(this.state.map.getCenter())

	}

	zoomChanged(){
		// console.log('zoomChanged: '+this.state.map.getZoom())

	}

	mapLoaded(map){
		if (this.state.map != null)
			return

		this.props.onMapReady(map)
		this.setState({
			map: map
		})
	}

	handleMarkerClick(marker){
		if (this.props.markerClicked != null)
			this.props.markerClicked(marker, this.state.map)
	}


	render(){
		const markers = this.props.markers || []

		return (
			<GoogleMap
				ref={this.mapLoaded.bind(this)}
				onDragEnd={this.mapMoved.bind(this)}
				onZoomChanged={this.zoomChanged.bind(this)}
			    defaultZoom={this.props.zoom}
			    defaultCenter={this.props.center}>
			    {markers.map((marker, index) => (
				      <Marker 
		            	key={index} 
		            	clickable={true} 
		            	icon={marker.icon} 
		            	label={marker.label} 
		            	title={marker.key} 
		            	onClick={this.handleMarkerClick.bind(this, marker)} 				      
				      	{...marker} />
			    	)
			    )}
			</GoogleMap>
		)
	}
}


export default withGoogleMap(Map)

=====================================================
	<div className="sidebar-wrapper" style={{height:300}}>
<Map
  onMapReady={ (map) => {
    if (this.state.map != null)
    return

    console.log('onMapReady: '+JSON.stringify(map.getCenter()))
    this.setState({
      map: map
    })
  }}

  zoom={14}
  center={{lat:40.7224017, lng:-73.9896719}}
  containerElement={<div style={{height:100+'%'}} />}
  mapElement={<div style={{height:100+'%'}} />} />
	  
	  
============================
	{id:1, key:1, defaultAnimation:2, label:'Oando Gas station', position:{lat:6.5713855, lng:3.2972326}}