My React/Redux component for working with Google Maps:
import React, { Component, PropTypes } from 'react'
import { coect } from 'react-redux'
import { changeMapCenter } from '../actions'
class Map extends Component {
componentDidMount() {
let script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCXg-YGJF&callback=initMap')
document.getElementsByTagName('head')[0].appendChild(script)
window.initMap = () => {
this.map = new google.maps.Map(document.getElementById('map'), {
center: this.props.defaultCenter,
zoom: this.props.defaultZoom
});
this.map.addListener('center_changed', (event) => {
let center = {
lat: this.map.getCenter().lat(),
lng: this.map.getCenter().lng()
}
this.props.onMapCenterChanging(center)
});
}
}
render() {
retu (
<div id='map'></div>
);
}
}
const mapStateToProps = (state) => {
retu {
mapPoints: state.mapPoints
}
}
const mapDispatchToProps = (dispatch) => {
retu {
onMapCenterChanging: (center) => {
dispatch(changeMapCenter(center))
}
}
}
export default coect(mapStateToProps, mapDispatchToProps)(Map)
As you can see now this component just initializes map and listens map center changing. Now I need render some markers (mapPoints). From Google API Documentation I can do it (for example):
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
But how can I do in 'React-style'? Because drawing marker is not 'render' HTML, it's just calling JS Google Maps API function. I can put this logic in 'initMap' function, but my 'mapPoints' can change. Should I put JS logic (removing deleted points / draw new points) in 'render' function? Thanks!
