Skip to content

Instantly share code, notes, and snippets.

@velocity-360
Last active August 3, 2020 14:52
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save velocity-360/f2f9bdb530ad0a752e9d56fc4dffd6c5 to your computer and use it in GitHub Desktop.
// 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment