Update Marker in Google Maps without loading whole map

Question

I have an Application in CI where i am getting the current location of a employee after every two seconds from database and draw its current location marker my code is working but after every 2 seconds it will update the marker by showing a new location marker but keep showing old markers too. i want to delete old marker of employee before showing the new marker. here is my code

<script>
function initMap4(data,id) {

    var map2 = new google.maps.Map(document.getElementById('map2'), {
        zoom: 8,
        center: new google.maps.LatLng(31.1704,72.7097),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
         var infowindow = new google.maps.InfoWindow({});

         window.setInterval(function(){
          $.ajax({
            type: 'POST',
            url: '<?php echo base_url() ?>salesman/get_salesman_by_id',
            data : { id: id},
            success:  function (response) {
            var result = response ;
             update(result);
            }
          });
        },2000);

    function update(data){

               var clicked = false;
               var locations2;
               if(data){
                locations2= JSON.parse(data);
               }else{
               locations2 = JSON.parse('<?php echo $clocation; ?>');
               }

               var locations_array2= [];

              $.each(locations2[0], function( index, value ) {
                 locations_array2.push([
                     value.first_name,
                     value.lat,
                     value.long,
                     value.checkin_time,
                     value.checkout_time,
                 ]);
               });

              locations2=locations_array2;

                   for (i = 0; i < locations2.length; i++)
                   {
                                 var currTime = Date.now() - 300000;
                                 var online  = locations2[i][5];

                              var    MyOnlineMarker = {
                                    position: new google.maps.LatLng(locations2[i][1], locations2[i][2]),
                                    map: map2,
                                   };

                                 if(locations2[i][4] == "" ){
                                   marker = new google.maps.Marker(MyOnlineMarker);
                                  }else{
                                    marker = new google.maps.Marker({
                                    position: new google.maps.LatLng(locations2[i][1], locations2[i][2]),
                                    map: map2,
                                    icon: 'assets/Images/red.png'
                                   });
                                 }
               }
       }

  }

</script>

Please provide a [mcve] that demonstrates your issue. What does your JSON look like? — geocodezip, Aug 01 '18 at 10:57
Will you only ever have one marker? Or could there be multiple markers? If so, is there a property in your JSON that identifies the marker? — geocodezip, Aug 01 '18 at 11:12
possible duplicate of [Google Map v3 auto refresh Markers only](https://stackoverflow.com/questions/14771422/google-map-v3-auto-refresh-markers-only) — geocodezip, Aug 01 '18 at 11:18
possible duplicate of [update markers without reloading the web page google maps v3](https://stackoverflow.com/questions/9582855/update-markers-without-reloading-the-web-page-google-maps-v3) — geocodezip, Aug 01 '18 at 11:20

score 0 · Answer 1 · edited Aug 01 '18 at 13:26

0

Ive solved it by pushing marker in an array than delete them

edited Aug 01 '18 at 13:26

geocodezip

158,664
13
220
245

answered Aug 01 '18 at 13:00

Bilal Ali

9
2

Update Marker in Google Maps without loading whole map

1 Answers1