使用缩放更改Google Maps自定义图标

Question

I am trying to change my google map markers so that when the zoom is < 5 they change from their custom markers to a star image. This is what I have so far (not working)

//zoom icons to stars at continent level
google.maps.event.addListener(busMap, 'zoom_changed', function() {
    var markerIconStar = google.maps.MarkerImage("icons/star.png");
    var currentZoom = busMap.getZoom();
    if (currentZoom < 5){
        markerSanFran.setIcon(markerIconStar);
        markerLA.setIcon(markerIconStar);
        markerHollywood.setIcon(markerIconStar);
        markerSantaCruz.setIcon(markerIconStar);
        markerSanDiego.setIcon(markerIconStar);
        markerLasVegas.setIcon(markerIconStar);
        markerGrandCan.setIcon(markerIconStar);
        markerMamLakes.setIcon(markerIconStar);
        markerYosemite.setIcon(markerIconStar);
      }

});

http://screamingeagle.travel/map/map2.html is a where you can see the rest of the code in action currently

Answer 1

You are adding your zoom_changed listener to the map before the busMap is defined, so it doesn't ever fire. Add it to busMap where that is defined (in your loadBusMap function)

function loadBusMap() {

//The empty map variable ('busMap') was created above. The line below creates the map, assigning it to this variable. The line below also loads the map into the div with the id 'bus-map' (see code within the 'body' tags below), and applies the 'busMapOptions' (above) to configure this map. 
busMap = new google.maps.Map(document.getElementById("bus-map"), busMapOptions);    

 directionsDisplay = new google.maps.DirectionsRenderer();

//Assigning the two map styles defined above to the map.
busMap.mapTypes.set('map_styles_bus', styled_bus);
busMap.mapTypes.set('map_styles_bus_zoomed', styled_bus_zoomed);
//Setting the one of the styles to display as default as the map loads.
busMap.setMapTypeId('map_styles_bus');

//Calls the function below to load up all the map markers and pop-up boxes.
loadMapMarkers();

google.maps.event.addListener(busMap, 'zoom_changed', function() {
  var markerIconStar = google.maps.MarkerImage("icons/star.png");

  var currentZoom = busMap.getZoom();
  if (currentZoom < 5){
        markerSanFran.setIcon(markerIconStar);
        markerLA.setIcon(markerIconStar);
        markerHollywood.setIcon(markerIconStar);
        markerSantaCruz.setIcon(markerIconStar);
        markerSanDiego.setIcon(markerIconStar);
        markerLasVegas.setIcon(markerIconStar);
        markerGrandCan.setIcon(markerIconStar);
        markerMamLakes.setIcon(markerIconStar);
        markerYosemite.setIcon(markerIconStar);
      }

  });
}