Skip to content

Instantly share code, notes, and snippets.

@MarcusBliss MarcusBliss/map.js
Last active Apr 3, 2018

Embed
What would you like to do?
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}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.