title: Dynamically add, update, delete markers in react-google-maps
body: <p>Looking at the docs about <a href="https://tomchentw.github.io/react-google-maps/" rel="nofollow noreferrer">react-google-maps</a>, I was able to hack together some code to render a map with static data. Now I need to make changes to the map based on new data coming in from API or periodic updates and don't see any talk about how to do this. </p>
  
  <p>To make the initial application, I did an "npx create-react-app xxx" to create an app and then added the necessary npm packages for react-google-maps. Here's basic code:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import * as serviceWorker from './serviceWorker';
  import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
  
  
  let markers = []
  
  function createMarkers(numMarkers){
  
      for(let i = 0; i &lt; numMarkers; i++){
          markers.push(&lt;Marker key={i} position={{ lat: 45.123 + (i * 0.005), lng: -75.987 }} /&gt;)
      }
  
      return markers;
  }
  
  setInterval(function(){ 
    if(markers.length &gt; 0 &amp;&amp; markers[0].props.position){
      let marker = markers[0];
      //debugger;
      let position = marker.props.position;
      position.lat = position.lat - 0.005;
      position.lng = position.lng - 0.005;
      marker.props.position = position;
    }
  }, 1000)
  
  const MyGreatMap = withScriptjs( withGoogleMap(props =&gt; &lt;GoogleMap
        defaultZoom={14}
        defaultCenter={{ lat: 45.123, lng: -75.978 }}
      &gt;
        {createMarkers(10)}
      &lt;/GoogleMap&gt;));
  
  
  ReactDOM.render(
    &lt;MyGreatMap 
      googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry,drawing,places&amp;key=AIzaSyDS-TFZqRfUx9xPXTJrPH6eml-gGo-btZ0"
      loadingElement={&lt;div style={{ height: `100%` }} /&gt;}
      containerElement={&lt;div style={{ height: `800px` }} /&gt;}
      mapElement={&lt;div style={{ height: `100%` }} /&gt;}
    /&gt;, 
    document.getElementById('root'));
  </code></pre>
  
  <p>When I update the props, nothing happens. I'm sure that's wrong and it should be updating state somehow, but the lat/lng info in the markers are props. </p>
  
  <p>What is the best way to update things in react-google-maps? Google maps in general is a very javascript intensive API so I don't know if it can work "the react way". What's the best way to make changes to react-google-maps to get them to efficiently re-render with changes? </p>