Updating multiple Google Markers on a MAP w/out refreshing a page.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi fellow coders

I need help to dynamically load Markers onto a Google Map without refreshing the page. The database receives constantly updated longitudes and latitudes from devices loaded onto Vehicles.

The client wants to see the markers for the vehicles changing to depict movement. How can I achieve this? Please assist.

Below is my code so far:

I suspect some Javascript is required to run like every minute and fetch the new coordinates from the database (in our demo code its a simple array), but I haven't figured out how to achieve this.

NOTES:

1. In the actual code, the markers are pulled from the database via a class, but in the demo code the class is commented and you can use the sample array $strmarkers

2. To test, set your own Google Maps API key in the last script tag

3. I have attached the zip file with the code

4. Here is the link to what I have so far

Thanks friends

awarded to mashtullah

Crowdsource coding tasks.

2 Solutions


This is should work Just copy paste this to new file in the same directory and test

https://codeshare.io/GkNzg3

All you need is this in your js

setInterval(function(){ your_fetching_logic() }, time_in_milliseconds);

I've tested, but unfortunately the markers arent moving when coordinates change... Did they move on your machine?
jobokoth 8 months ago
I had used a rand() in php to generate dynamic coordinates in order to testify However the markers flew to various different regions and before I could find them, they would have already Changed their location.. This however should have been working on your system..Is your database dynamic ?
SilverHood Apps 8 months ago
Winning solution

You will need to modify your javascript to the code i have below. This will keep on checking your data source every five seconds and if the new data is not equal to the old data it will clear all the markers on the map and recreate new markers with the new data. Actually you will see the markers change! you wont refresh the page!!
You can reduce or increase the interval as according to your needs.

<script>
var map;
    var markers = [];

  function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: {lat: -1.286790, lng: 36.822415}
    });

    setMarkers(map);
  }

  var locations = <?php echo json_encode($strmarkers, JSON_NUMERIC_CHECK); ?>;

  function setMarkers(map) {
    var image = {
      url: 'images/Truck_font_awesome.svg.png',
      size: new google.maps.Size(24, 24),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(0, 96)
    };

    for (var i = 0; i < locations.length; i++) {
      var carsarray = locations[i];
      var marker = new google.maps.Marker({
        position: {lat: carsarray[1], lng: carsarray[2]},
        map: map,
        icon: image,
        title: carsarray[0],
        zIndex: carsarray[3]
      });
      markers.push(marker);
    }
  }
 setInterval(function () {getNewLocations()}}, 5000);

function getNewLocations(){
  var xhttp;

  xhttp = new XMLHttpRequest();

  xhttp.open("POST",'',true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("apikey=ANYTHING");
  xhttp.onreadystatechange=function(){
    if (xhttp.readyState==4 && xhttp.status==200){
      var nlocations=JSON.parse(xhttp.responseText);
     if(nlocations!=locations)
    {
         for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }
        locations=nlocations;
        markers = [];
        setMarkers(map);
    }
    }
  }
}
</script>

and on the top of the file(php side) add the following

     if(isset($_POST['apikey'])) {
     header('Content-Type: application/json');
    echo json_encode(Vehicles::Get_Coordinates(), JSON_NUMERIC_CHECK);
    }
else
{
   ?>

 <!DOCTYPE html>
   <html>
       <head>
   ..... your html and the rest of the page
  .......

and at the end of the file add the code below

<?php } ?>

I've tested, but unfortunately the markers arent moving when coordinates change... Did they move on your machine?
jobokoth 8 months ago
If you ran the code as it is, the markers will NOT move, that is why i added a comment//get data mpya hapa... You are supposed to make an ajax request for new data, let me do it for you...
mashtullah 8 months ago
I have now updated my answer, you can test it and let me know if you get any hitches The updated file can be found here
mashtullah 8 months ago
View Timeline