Gmaps pan to

demo.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Gmaps, Marker, InfoWindow} from 'react-gmaps';

const points = [{
  lat: 51.5258541,
  lng: -0.09040660000006028
}, {
  lat: 51.5258541,
  lng: -0.08040660000006028
}, {
  lat: 51.5258541,
  lng: -0.07040660000006028
}];

const App = React.createClass({

  panTo(index) {
    const center = new google.maps.LatLng(points[index].lat, points[index].lng);
    this.refs.gmaps.getMap().panTo(center);
  },

  renderMarkers() {
    return points.map((coords, index) =>
      <Marker
        key={index}
        lat={coords.lat}
        lng={coords.lng}
        onClick={() => this.panTo(index)}
      />
    );
  },

  render() {
    return (
      <Gmaps
        ref="gmaps"
        width={400}
        height={300}
        lat={points[1].lat}
        lng={points[1].lng}
        zoom={12}
      >
        {this.renderMarkers()}
      </Gmaps>
    );
  }

});

ReactDOM.render(<App />, document.getElementById('gmaps'));