title: SetPosition: not a LatLng or LatLngLiteral: in property lat: not a number using React and Google Maps
body: <p>I am trying to display multiple markers using google maps and react but keep getting the error mentioned above. The idea is to have multiple markers displayed from lat and long cords in an array. Any thoughts?</p>
  
  <p>Codepen: <a href="http://codepen.io/anon/pen/evOoNP?editors=0010" rel="nofollow noreferrer">http://codepen.io/anon/pen/evOoNP?editors=0010</a></p>
  
  <pre><code>class GMap extends React.Component {
    state = { zoom: 10 };
  
    static propTypes() {
      initialCenter: React.PropTypes.objectOf(React.PropTypes.number).isRequired
    }
  
      render() {
      return &lt;div className="GMap"&gt;
        &lt;div className='UpdatedText'&gt;
          &lt;p&gt;Current Zoom: { this.state.zoom }&lt;/p&gt;
        &lt;/div&gt;
        &lt;div className='GMap-canvas' ref="mapCanvas"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    }
  
    componentDidMount() {
      // create the map, marker and infoWindow after the component has
      // been rendered because we need to manipulate the DOM for Google =(
      this.map = this.createMap()
      this.marker = this.createMarker()
      this.infoWindow = this.createInfoWindow()
  
      // have to define google maps event listeners here too
      // because we can't add listeners on the map until its created
      google.maps.event.addListener(this.map, 'zoom_changed', ()=&gt; this.handleZoomChange())
    }
  
    // clean up event listeners when component unmounts
    componentDidUnMount() {
      google.maps.event.clearListeners(map, 'zoom_changed')
    }
  
    createMap() {
      let mapOptions = {
        zoom: this.state.zoom,
        center: new google.maps.LatLng(38, -78)
      }
      return new google.maps.Map(this.refs.mapCanvas, mapOptions)
    }
  
    mapCenters() {
      return new google.maps.LatLng(
        this.props.initialCenter.lat,
        this.props.initialCenter.lng
      )
    }
  
    mapCenter() {
  
      const navLinks = [
          {location: "Bondi Beach", lat: -33.890542, long: 151.274856},
          {location: "Coogee Beach", lat: -33.923036, long: 151.259052},
          {location: "Cronulla Beach", lat: -34.028249, long: 151.157507}
      ];
      return navLinks.map((b, i) =&gt; {
        console.log(b)
        return new google.maps.LatLng(b.lat, b.long)
      })
    }
  
    createMarker() {
      return new google.maps.Marker({
        position: this.mapCenter(),
        map: this.map
      })
      }
  
    createInfoWindow() {
      let contentString = "&lt;div class='InfoWindow'&gt;I'm a Window that contains Info Yay&lt;/div&gt;"
      return new google.maps.InfoWindow({
        map: this.map,
        anchor: this.marker,
        content: contentString
      })
    }
  
    handleZoomChange() {
      this.setState({
        zoom: this.map.getZoom()
      })
    }
  }
  
  var initialCenter = { lng: -90.1056957, lat: 29.9717272 }
  
  ReactDOM.render(&lt;GMap initialCenter={initialCenter} /&gt;, document.getElementById('container'));
  </code></pre>