Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change markers on zoom change in google map api

I have a map and I'd like to change the marker image, when zoom is greater then 5.
I know how to detect zoom change, but I don't see how to change the image.

like image 223
kaklon Avatar asked Jul 07 '10 08:07

kaklon


People also ask

How do I change the zoom level in Google Maps API?

Users can zoom the map by clicking the zoom controls. They can also zoom and pan by using two-finger movements on the map for touchscreen devices.

How do I change the color of a marker in Google Maps API?

To edit the marker color, click or tap on the marker icon. When you do that, you can change both the color of the marker and its style. Go for the color or style you want to change and then click OK to see the effect. Click on the button labeled Done to save your new marker color settings.


1 Answers

That should be quite easy. I gave a look to your code, and it looks like you are not keeping a reference to your markers. This is the first thing that you should do.

Therefore create a markers array:

var markers = [];

And within your setMarkers() function, push each new marker into this array:

markers.push(marker);

Now you will be able to iterate over your markers with a for loop: for (i = 0; i < markers.length; i++).

Ideally, we should also store the two icons of each marker in the marker object itself. JavaScript objects can be augmented with custom properties very easily. To do so, you may want to change your setMarkers() function as follows:

function setMarkers(map, map_bounds, locations, iconLevel1, iconLevel2) {
  for (var i = 0; i < locations.length; i++) {
    var loc = locations[i];
    var myLatLng = new google.maps.LatLng(loc[1], loc[2]);

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: iconLevel1,    // iconLevel1 by default
      title: loc[0],
      zIndex: loc[3]
    });

    // Add custom properties to the marker object
    marker.iconLevel1 = iconLevel1;
    marker.iconLevel2 = iconLevel2;

    // Add the new marker to the markers array
    markers.push(marker);

    map_bounds.extend(myLatLng);
  }
}

Finally, it seems that you are already handling the zoom_changed event correct. First of all, I suggest checking if the zoomLevel has changed between 1 and 2, in order not to iterate through the markers array if there is no need. If there is a change, simply call the setIcon() method for each marker, and pass the custom property iconLevel1 or iconLevel2 depending on the zoomLevel:

var zoomLevel = 1;

google.maps.event.addListener(map, 'zoom_changed', function() {
  var i, prevZoomLevel;

  prevZoomLevel = zoomLevel;

  map.getZoom() < 5 ? zoomLevel = 1 : zoomLevel = 2;

  if (prevZoomLevel !== zoomLevel) {
    for (i = 0; i < markers.length; i++) {
      if (zoomLevel === 2) {
        markers[i].setIcon(markers[i].iconLevel2);
      }
      else {
        markers[i].setIcon(markers[i].iconLevel1);
      }
    }
  }
});

The above should work, but you may want to refactor your for loop as follows, using the subscript notation instead of the dot notation to access the properties of the markers:

for (i = 0; i < markers.length; i++) {
  markers[i].setIcon(markers[i]['iconLevel' + zoomLevel]);
}
like image 181
Daniel Vassallo Avatar answered Oct 21 '22 03:10

Daniel Vassallo