title: How to add map markers stored in a JSON feed to an existing React Google Map?
body: <p>I have a react-google-maps project which creates a map:</p>
  
  <pre><code>const MarkerComponent = ({text}) =&gt; &lt;div&gt;{text}&lt;/div&gt;;
  
  export default class NavMap extends Component {
    constructor(props) {
      super(props);
      this.state = {
        markers: []
      }
    }
  
    static defaultProps = {
      center: {lat: -41.25,lng: 173.2},
      zoom: 11
    }
    render() {
      return (&lt;div id="nav-map" className='google-map'&gt;
      &lt;GoogleMapReact 
        name={map} 
        apiKey={'MYAPIKEY'} 
        defaultCenter={this.props.center} 
        defaultZoom={this.props.zoom}&gt;
        &lt;MarkerComponent lat={-41.25} lng={173.2} text={'Centre'}/&gt;
      &lt;/GoogleMapReact&gt;
      &lt;/div&gt;)
    }
  }
  </code></pre>
  
  <p>This will add a text marker to the centre of the map.</p>
  
  <p>However I can't work how to add the markers from a dynamic JSON feed that is loaded after the map is created/ loaded in React. Please note the JSON feed could be updated - at which point the markers would be refreshed.</p>
  
  <p>In React I normally call a JSON feed like this:</p>
  
  <pre><code>componentDidMount() {
    fetch('/myJSONfeed').then(response =&gt; response.json()).then(data =&gt; {
      this.setState({data});
    });
   }
  </code></pre>
  
  <p>I've had a good look around online for a solution but have not being able to work out how to add dynamic markers after the map has been created/ loaded.</p>
  
  <p>Any ideas or example code would be appreciated.</p>