Google Markers on Map Jump to other regions on Zoom out or Zoom In
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi

How can I ensure the markers on my Google Maps application stay static? They jump onto other regions of the world on Zoom out or Zoom in. At lowest zoom level is when they are in the right place.

See this video of the behaviour https://drive.google.com/file/d/1Cd18VPJNCJvE0x7-YVXevBtATL-jVtNV/view?usp=drivesdk

Below's the code. Please help
Thanks

`<?php

include('config.inc.php');
spl_autoload_register(function ($class_name) {
include 'classes/class.' . $class_name . '.php';
});
$strmarkers = Vehicles::Get_Coordinates();

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

?>
<!DOCTYPE html>





Marker Clustering

#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}





var map;
var markers = [];

    //bounds  = new google.maps.LatLngBounds(); //New code

    //-0.45483833,39.64496833

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {lat: -0.45483833, lng: 39.64496833}
    });
    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);
      //loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); // New code
      //bounds.extend(loc); // New code
    }

    //map.fitBounds(bounds);       // New code
    //map.panToBounds(bounds);     // New code
  }
 setInterval(function () {getNewLocations()}, 20000);

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>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR-OWN-API-KEY&callback=initMap">
</script>

<?php
}
?>
`

What's the contents of $strmarkers?
kostasx 22 days ago
Its a variable with the coordinates array
jobokoth 22 days ago
i have added a solution, with flexible image rendering, so you could avoid creating images, and it's problems, doing that, you will have excellent result
Chlegou 22 days ago
awarded to kostasx

Crowdsource coding tasks.

2 Solutions

Winning solution

Comment out this part from your code:

anchor: new google.maps.Point(0, 96)

BEFORE:

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)
};

AFTER:

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)
};

After reviewing your code, it appears you want to use clustering to render positions, so i started from the google clustering example, and added, a truck icon for markers. doing that, i also, used a cdn to create the truck image, that will render it at any size we want, so no need to build the image manually, so we avoid any problems we could have.

here is a working example, i have made for you.

link: https://jsfiddle.net/2Lcm9sgp/17/

image is inserted from here: https://icons8.com/icon/set/truck/all

i used this one: https://png.icons8.com/android/24/000000/truck.png (black)

color could be customised, see it here: https://png.icons8.com/android/24/ffffff/truck.png (white)

also size: https://png.icons8.com/android/50/ffffff/truck.png (50px)

in the example i made, clusters are rendered perfectly, also, markers.
i believe you could complete the ajax part to rely php locations with the demo i have created.

NOTE: the API_Key Used for the demo, is for demo purpose, and not mine, please don't use it for your project.

View Timeline