Skip to content

Instantly share code, notes, and snippets.

@wuct
Created May 13, 2015 06:49
Show Gist options
  • Save wuct/956b93548a5c9b8fb7f0 to your computer and use it in GitHub Desktop.
Save wuct/956b93548a5c9b8fb7f0 to your computer and use it in GitHub Desktop.
react-google-map handle zoom and center changed
import React from 'react';
import {GoogleMaps, InfoWindow} from 'react-google-maps';
class MapCanvas extends React.Component {
constructor(...args) {
super(...args);
this.state = {
zoomLevel: 3,
center: new google.maps.LatLng(34.397, 60.644)
};
}
render() {
return (
<GoogleMaps containerProps={{
style: {
height: '100%'
}
}}
googleMapsApi={google.maps}
ref="map"
zoom={this.state.zoomLevel}
center={this.state.center}
onCenterChanged={this._handleCenterChanged.bind(this)}
onZoomChanged={this._handleZoomChanged.bind(this)}>
<InfoWindow content={`count: ${this.props.data}`} position={{lat: 44, lng: 44}}></InfoWindow>
</GoogleMaps>
);
}
_handleZoomChanged() {
const zoomLevel = this.refs.map.getZoom();
if (zoomLevel !== this.state.zoomLevel) {
this.setState({zoomLevel});
}
}
_handleCenterChanged() {
const center = this.refs.map.getCenter();
if (!center.equals(this.state.center)) {
this.setState({center});
}
}
}
MapCanvas.defaultProps = {
data: 1
};
export default MapCanvas;
@tomchentw
Copy link

_handleZoomChanged() {
    updateMap();
  }

  _handleCenterChanged() {
    updateMap();
  }

  const updateMap = _.throttle(() => {
    const zoomLevel = this.refs.map.getZoom();
    if (zoomLevel !== this.state.zoomLevel) {
      this.setState({zoomLevel});
    }
    const center = this.refs.map.getCenter();
    if (!center.equals(this.state.center)) {
      this.setState({center});
    }
  }, 1000/60);

@rizwanuu
Copy link

my getZom() function giving an error.
1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment