CODEWITHSUNDEEP
javascriptgoogle-mapsmarker
Pablo
Pablo

Reputation: 65

Google Maps API remove marker by latitude/longitude

I have a google map that I am constantly updating with markers. If the markers overlap(exact same location) I have a counter that adds to the number inside the marker. The problem is that every time I add a new marker it doesn't always put it on top of the other marker. So, for example, the marker has the number 10 in it. A new marker comes down with 11 and after the animation it hides behind the 10. Some times after a few markers the top marker will then be the correct number, like 21 instead of 10.

So is there a way to remove the marker by Latitude/Longitude before adding the new one? Here is what I have:

for (var i=0; i<response.trans.length; i++) {
    //add to location 
    location[response.trans[i].location_id] += 1;

    latLng = new google.maps.LatLng(response.trans[i].latitude, response.trans[i].longitude);
    marker = new google.maps.Marker({
         map:map,                                                           
         position: latLng, 
         icon: 'http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|'+client[response.trans[i].location_id], 
         animation: google.maps.Animation.DROP
   });
   markers.push(marker);
}

Thanks Raymond! You pushed me in the right directions

This is the code that worked for me:

for (var i=0; i<response.trans.length; i++) {
    //add to total count
    totalCount += 1;

    //add to location
    location[response.trans[i].location_id] += 1;

    markerChanged = false;
    for(x=0; x < markers.length; x++){
        if(markers[x].getPosition().lat().toFixed(6) == response.trans[i].latitude.toFixed(6) && markers[x].getPosition().lng().toFixed(6) == response.trans[i].longitude.toFixed(6)){
            markers[x].setIcon('http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|'+location[response.trans[i].location_id]);
            markers[x].setAnimation(google.maps.Animation.DROP);
            markerChanged = true;
        }
    }

    if(markerChanged === false){
        latLng = new google.maps.LatLng(response.trans[i].latitude, response.trans[i].longitude);
        marker = new google.maps.Marker({
            map:map,
            position: latLng, 
            icon: 'http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|'+location[response.trans[i].location_id], 
            animation: google.maps.Animation.DROP
        });
        markers.push(marker);
     }
 }

So I added the inner for loop, it checks against current markers. I had to use toFixed(6) to change it to a string. Floating point precision was throwing off the exactness. So if the marker was the same it would change the icon. If it was a new marker it would add it to the map. I added the DROP animation because I still wanted it to be obvious that it was updated.

Thanks!

Upvotes: 1

Views: 2859

Answers (2)

Ray
Ray

Reputation: 2728

If they are the same exact location you can try:

for(i=0; i < markers.length; i++) {
    if(markers[i].getPosition().lat() == response.trans[i].latitude && markers[i].getPosition().lng() == response.trans[i].longitude)
        markers[i].icon = "number11.png"
}

Upvotes: 0

Alexander
Alexander

Reputation: 23537

I believe you can aggregate the information of the list before adding the markers to the map. That is,

var location = {};

for (var i = 0; i < response.trans.length; i++) {
  location[response.trans[i].location_id] += 1;
}

for (location_id in location) {
  if (location.hasOwnProperty(location_id)) {
    /* add marker */
  }
}

Upvotes: 1

Related Questions