0

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

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.