title: How to move marker on the google map react js
body: <p>I want to move multiple markers on the google map when I get the latitude and longitude from MongoDB. I'm always getting updated latitude and longitude from db, but my markers are not moving, and after refreshing the page, the markers positions are changing, but I need to do it without refreshing the page.</p>
  
  <p>This is my code`</p>
  
  <pre><code>class Maps extends React.Component {
   constructor(props){
   super(props);
      this.state = { 
          dronePosition: []
       };
  
      var _this = this;
      const config = { 
        headers: {
                  "Authorization" : `Bearer ${localStorage.getItem('token')}`,
                }
      };
  
  
  // If I'm using setInterval, the markers are not showing at all. That's why here I call the getAllDrones() function
  // setInterval(function(){
  axios.get(packages.proxy+'drones/getAllDrones',config)
               .then(res =&gt; {
   //Here I'm always getting updated positions for markers from backend.
                  _this.state.dronePosition = [];
                 res.data.forEach( function(element) {
                  if(element.userId == localStorage.getItem("user_id")){
                      _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"})
                  }
                  else{
                      _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"})
                  }
                 });
                   _this.getAllDrones();
               }) 
  
          // }, 2000)
  
      }
  
  getAllDrones(){
          var _this = this;
          const config = { 
                headers: {
                          "Authorization" : `Bearer ${localStorage.getItem('token')}`,
                        }
              };
          axios.get(packages.proxy+'drones/getAllDrones',config)
               .then(res =&gt; {
                  _this.state.dronePosition = [];
                 res.data.forEach( function(element) {
                  if(element.userId == localStorage.getItem("user_id")){
                      _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"})
                  }
                  else{
                      _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"})
                  }
                 });
                  _this.getAllDrones2();
               }) 
      }
  
  getAllDrones2(){
          var _this = this;
          const config = { 
                headers: {
                          "Authorization" : `Bearer ${localStorage.getItem('token')}`,
                        }
              };
          axios.get(packages.proxy+'drones/getAllDrones',config)
               .then(res =&gt; {
                  _this.state.dronePosition = [];
                 res.data.forEach( function(element) {
                  if(element.userId == localStorage.getItem("user_id")){
                      _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"})
                  }
                  else{
                      _this.state.dronePosition.push({id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"})
                  }
                 });
                  _this.getAllDrones();
               }) 
      }
  
  
  render(){
      var _this = this;
      const { google } = this.props;
      const icon = {
          url: `data:image/jpeg;base64,${binary_data}`, 
          scaledSize: new google.maps.Size(40, 40), 
          origin: new google.maps.Point(0,0), 
          anchor: new google.maps.Point(0, 0) 
      };
          return (
              &lt;div&gt;
                  &lt;Header /&gt;
                      &lt;Map className="map" google={google} initialCenter={userLocation} zoom={15} onClick={this.onMapClicked} &gt;
  
                                  {_this.state.dronePosition.map(marker =&gt; (
                                      &lt;Marker
                                        onClick={_this.MarkerClick.bind(_this, marker.id)}
                                        icon={marker.photo}
                                        position={{ lat: marker.latitude, lng: marker.longitude }}
                                        key={marker.id}
                                      /&gt;
                                  ))}         
                      &lt;/Map&gt;
              &lt;/div&gt;
              )
      }
  </code></pre>