0

I'm using a custom image as an icon/marker for a Google Map API. I would like the marker image to resize as users zoom in on the map.

I adopted some of the code from this question: Google Maps :: Changing icon based on zoom level

Unfortunately, this script only changes the last lat/long marker in my list. I'm not sure why, can anyone point out my mistake?

Here's the code:

var locations = [
 ['Aaron Baddeley (130)',-25.274398,133.775136],
 ['Adam Hadwin (176)',52.939916,-106.450864],
 ['Adam Scott (7)',-26.65,153.066667],
 ['Adilson da Silva (291)',-28.530554,30.895824],
 ['Alejandro Canizares (167)',40.416775,-3.70379],];

var infowindow = new google.maps.InfoWindow({}

var image = new google.maps.MarkerImage('images/marker11.gif',
  new google.maps.Size(9,9), //size
    null, //origin
    null, //anchor
    new google.maps.Size(9,9) //scale
);

var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  map: map,
  icon: image,
});

//when the map zoom changes, resize the icon based on the zoom level so the marker covers the same geographic area
google.maps.event.addListener(map, 'zoom_changed', function() {
  var pixelSizeAtZoom4 = 9; //the size of the icon at zoom level 4
  var maxPixelSize = 350; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels

  var zoom = map.getZoom();
  var relativePixelSize = Math.round(pixelSizeAtZoom4*Math.pow(1.2,zoom)); // use 2 to the power of current zoom to calculate relative pixel size.  Base of exponent is 2 because relative size should double every time you zoom in

  if(relativePixelSize > maxPixelSize) //restrict the maximum size of the icon
   relativePixelSize = maxPixelSize;

  if(zoom < 4) //when zooming < 4, fix pixel size to 9
   relativePixelSize = 9;


//change the size of the icon

marker.setIcon(
    new google.maps.MarkerImage(
        marker.getIcon().url,  //marker's same icon graphic
        null,//size
        null,//origin
        null, //anchor
        new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale
    )
);        
});
Community
  • 1
  • 1
Alex B
  • 59
  • 2
  • 7
  • related question: [change google maps custom icon with zoom](http://stackoverflow.com/questions/18992074/change-google-maps-custom-icon-with-zoom) – geocodezip Aug 21 '16 at 17:38

1 Answers1

0

Add an event listener for zoom_changed events that trigger a change of the marker's icon 

map.addListener('zoom_changed', function() {
    for (var i=0, len = locations.length; i < len; i++) { 
       // set new icon depending on the value of map.getZoom()
       markers[i].setIcon(...) 
    }
});

You should save your markers in an array markers when you create them in the for loop, so you can reference them as markers[i].

user2314737
  • 27,088
  • 20
  • 102
  • 114
  • Thanks for the reply! I'm pretty green when it comes to creating arrays, so I tried using a different approach, basically resizing the same marker depending on the zoom level. – Alex B Aug 28 '16 at 17:17