title: How do I display multiple markers with react-google-maps
body: <p>I'm trying to display multiple markers using an npm package called react-google-maps and I'm having a difficult time. I'm following the demo here on how to display one map marker (<a href="https://tomchentw.github.io/react-google-maps/events/simple-click-event" rel="nofollow noreferrer">https://tomchentw.github.io/react-google-maps/events/simple-click-event</a>), however when I do the trivially understood thing of adding a second marker element to the the GoogleMap component I can't get that marker to display (I've also changed the coordinates). It's really bothering me and if anyone could point out what's going wrong I would really appreciate it.</p>
  
  <p>Thanks.</p>
  
  <p>Here is the code as I've fiddled with it.
  The only thing I've changed is added the second marker, with a new coordinate.</p>
  
  <pre><code>/* global google */
  import {
    default as React,
    Component,
  } from "react";
  
  
  import withGoogleMap from './assets/withGoogleMap';
  import GoogleMap from './assets/GoogleMap';
  import Marker from './assets/Marker';
  
  const SimpleClickEventExampleGoogleMap = withGoogleMap(props =&gt; (
    &lt;GoogleMap
      ref={props.onMapMounted}
      zoom={props.zoom}
      center={props.center}
      onCenterChanged={props.onCenterChanged}
    &gt;
      &lt;Marker
        defaultPosition={props.center}
        title="Click to zoom"
        onClick={props.onMarkerClick}
      /&gt;
  
      &lt;Marker
        defaultPosition={props.marker2center}
        title="Click to zoom"
        onClick={props.onMarkerClick}
      /&gt;
  
  
  
    &lt;/GoogleMap&gt;
  ));
  
  const INITIAL_CENTER = { lat: -25.363882, lng: 131.044922 };
  const MARKER1_CENTER = { lat: -25.363882, lng: 131.044922 };
  const MARKER2_CENTER = { lat: -25.44, lng: 131.55 };
  
  /*
   * https://developers.google.com/maps/documentation/javascript/examples/event-simple
   *
   * Add &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt; to your HTML to provide google.maps reference
   */
  export default class SimpleClickEventExample extends Component {
  
  
  
    state = {
      zoom: 4,
      center: INITIAL_CENTER,
      marker2center: MARKER2_CENTER
    };
  
    handleMapMounted = this.handleMapMounted.bind(this);
    handleCenterChanged = this.handleCenterChanged.bind(this);
    handleMarkerClick = this.handleMarkerClick.bind(this);
  
    handleMapMounted(map) {
      this._map = map;
    }
  
    handleMarkerClick() {
      this.setState({
        zoom: 8,
      });
    }
  
    handleCenterChanged() {
      const nextCenter = this._map.getCenter();
      if (nextCenter.equals(new google.maps.LatLng(INITIAL_CENTER))) {
        // Notice: Check nextCenter equality here,
        // or it will fire center_changed event infinitely
        return;
      }
      if (this._timeoutId) {
        clearTimeout(this._timeoutId);
      }
      this._timeoutId = setTimeout(() =&gt; {
        this.setState({ center: INITIAL_CENTER });
        this._timeoutId = null;
      }, 3000);
  
      this.setState({
        // Because center now is a controlled variable, we need to set it to new
        // value when "center_changed". Or in the next render it will use out-dated
        // state.center and reset the center of the map to the old location.
        // We can never drag the map.
        center: nextCenter,
      });
    }
  
    componentWillUnmount() {
      if (this._timeoutId) {
        clearTimeout(this._timeoutId);
      }
    }
  
    render() {
      return (
        &lt;div className='googleMap' style={{width: "500px", height: "500px", margin: "0 auto"}}&gt;
          &lt;SimpleClickEventExampleGoogleMap
            containerElement={
              &lt;div style={{ height: `100%` }} /&gt;
            }
            mapElement={
              &lt;div style={{ height: `100%` }} /&gt;
            }
            zoom={this.state.zoom}
            center={this.state.center}
            onMapMounted={this.handleMapMounted}
            onCenterChanged={this.handleCenterChanged}
            onMarkerClick={this.handleMarkerClick}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>