[GIS] Google Maps API – .seticon size based on zoom level

arraydynamicgoogle mapsjavascriptmarkers

I did look up this question on here but the answer used 'new google.maps.MarkerImage(' which has been deprecated, and I can't get anything else to work. I think it has to do with my array of markers, or my for loop to interact with the array of markers. I can change one marker by using: markerSantaCruz.setIcon(markerIconStar); where my for loop is below.

I also don't know if this is the best way to do what I'm trying to accomplish – and that is, just resize the icon image based on the zoom level. I was hoping to just change the scaledSize of the image, but I don't know if I need to recreate all of the markers or not.

Here is a link to the new documentation I was trying to use:
https://developers.google.com/maps/documentation/javascript/markers#convertingtoicon

Here is the original thread I was trying to replicate, first answer:
https://stackoverflow.com/questions/39066384/resizing-custom-image-marker-with-zoom-google-maps-api-v3

Here is my code:

var features = [
                  {
                    position: new google.maps.LatLng(-33.91720, 151.22630),
                    type: 'info'    //type is irrelevant right now            
                  }, {
                    position: new google.maps.LatLng(-33.91530, 151.22820),
                    type: 'info'                    
                  }, {
                    position: new google.maps.LatLng(-33.91747, 151.22912),
                    type: 'info'
                  }
                ];

        var markers = [];
            for (var i = 0; i < 3; i++) {
                markers = new google.maps.Marker({
                position: features[i].position,
                icon: {
                url: 'https://i.imgur.com/OXFEl0T.png',
                scaledSize: new google.maps.Size(100, 100),
            },
                map: map
          });
        };    

google.maps.event.addListener(map, 'zoom_changed', function() {

    var markerIconStar = { url: 'https://i.imgur.com/OXFEl0T.png', scaledSize: size2};
    var zoom = map.getZoom();
    var relativePixelSize = Math.round(zoom/22*50); //pixel size dynamically changes on zoom level

    size2 = new google.maps.Size(relativePixelSize, relativePixelSize);
         
        for (var i = 0; i < 3; i++) {
            markers[i].setIcon(
                var image = new google.maps.icon({
                  url: 'https://i.imgur.com/OXFEl0T.png',
                  size: size2,
                  origin: null,
                  anchor: null,
                  scaledSize: size2
            });
        };    
        );
    });

Best Answer

Old question, but here's how I changed icon sizes by listening to zoom changes:

// Change markers on zoom
  map.addListener('zoom_changed', function () {
    var zoom = map.getZoom();
    console.log(zoom);
    // iterate over markers and call setVisible
    for (var i = 0; i < markerArray.length; i++) {
      // Change markers on zoom
      console.log('marker' + markerArray[i])

      if (map.getZoom() >= 4) {
        if (map.getZoom() == 4) {
          markerArray[i].setIcon(icons[features[i].type].medZoomIcon);
          markerArray[i].setAnimation(google.maps.Animation.DROP);
          markerArray[i].setVisible(true);
        }
      } else {
        markerArray[i].setIcon(icons[features[i].type].highZoomIcon);
      }
    }
  });
Related Question