title: How to update React Google Map after receive data from server
body: <p>How to update <code>ReactGoogleMap</code> after receiving data from the server?</p>
  
  <p>This is how I create Google Map using react-google-maps API.</p>
  
  <pre><code>import React from "react"
  import { compose, withProps } from "recompose"
  import { withScriptjs, withGoogleMap, GoogleMap, Marker , Polyline} from "react-google-maps"
  import TextField from "@material-ui/core/TextField";
  import Button from "components/CustomButtons/Button.jsx";
  import './Maps.css';
  import axios from "axios";
  
  const pathCoordinates = [
          { lat: 1.322459, lng: 103.853972 },
          { lat: 1.39227, lng: 103.752 }
      ];
  
  const MyMapComponent = compose(
    withProps({
      googleMapURL: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;v=3.exp&amp;libraries=geometry,drawing",
      loadingElement: &lt;div style={{ height: `100%` }} /&gt;,
      containerElement: &lt;div style={{ height: `80vh` }} /&gt;,
      mapElement: &lt;div style={{ height: `100%` }} /&gt;,
    }),
    withScriptjs,
    withGoogleMap
  )((props) =&gt;
    &lt;GoogleMap
      defaultZoom={12}
      defaultCenter={{ lat: 1.322459, lng: 103.853972  }}
    &gt;
    &lt;div id='map_controls' class='toolbox'&gt;
    &lt;TextField 
      id="date"
      label="Date"
      type="date"
      defaultValue= ""
      InputLabelProps={{
          shrink: true,
          style: { color: '#fff' }
      }}
      value={props.date}
      onChange={props.handleChange('date')}
      /&gt;
      &lt;Button color="primary" onClick={props.handleSubmit}&gt;Select Date&lt;/Button&gt;
    &lt;/div&gt;
    {console.log("drawing...............")}
    {props.drawMap()}
  
    &lt;/GoogleMap&gt;
  )
  
  const initialState = {
      date: "",
      data: []
  };
  
  class Maps extends React.Component {
      constructor(props) {
              super(props);
              this.state = initialState;
              this.handleChange = this.handleChange.bind(this);
              this.handleSubmit = this.handleSubmit.bind(this);
              this.drawMap = this.drawMap.bind(this);
            }
  
    componentDidMount() {
      console.log(" componentDidMount   "+this.state.date);
    }
  
  
      handleChange = name =&gt; event =&gt; {
      this.setState({ [name]: event.target.value });
  
    };
  
    handleSubmit(event) {
  
      const input = {};
      input["date"] = this.state.date;
  
      axios.post("localhost:4000/readMap", input)
      .then(response =&gt; {
        console.log({response});
        this.setState({data: response.data});
  
          })
      .catch(error =&gt; {console.log(error.response)});
      event.preventDefault();
    }
  
    drawMap(){
  
        if(!(this.state.date==="")){
        var rows = [];
          for (var i = 0; i &lt; 2; i++) {
  
          if(i===0){
              rows.push(&lt;Marker label= {(i+1).toString()} position={{ lat: 1.39227, lng: 103.752 }}  key={i} /&gt;);
          }else if(i===1){
              rows.push(&lt;Marker label= {(i+1).toString()} position={{ lat: 1.322459, lng: 103.853972 }}  key={i} /&gt;);
          }else{
  
          }
      }
          return (&lt;div&gt;{rows}&lt;Polyline
                  path={pathCoordinates}
                  geodesic={true}
                  options={{
                      strokeColor: "#ff2527",
                      strokeOpacity: 0.75,
                      strokeWeight: 2
                  }}
              /&gt;&lt;/div&gt;);
        }else{
            console.log("no date");
        }
  
    }
  
    render() {
        this.drawMap();
      return (
        &lt;MyMapComponent
          handleChange={this.handleChange}
          handleSubmit={this.handleSubmit}
          drawMap={this.drawMap}
        /&gt;
      )
    }
  }
  
  export default Maps;
  </code></pre>
  
  <p>I want to draw the marker after I receive data from the database. I successfully read the input(which is a date) from the user and send this data to a server to get the data of this date from the database. Data is successfully received and able to print it in the console. However, I have no idea how to update MyMapComponent to display the marker of this date. I run drawMap() function again after I get the data but the <code>MyMapComponent</code> is not updated after I run <code>drawMap()</code>.</p>