Cannot get a different Icon in Google map on change event Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Cannot get a different Icon in Google map on change event without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am new to Google API V3. I want to change the Icon on Zoom event. The full code is running as expected, it is the last bit wherein I have given a map change event to capture the change in zoom so that I could change in the icon from a simple circle to Google standard red icon. Please do review and suggest corrections, thank you so much.

<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
  var infowindow;
  var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng(20, 0);
    var myOptions = {
    zoom: 3,
    panControl:true,
    zoomControl:true,
    mapTypeControl:true,
    scaleControl:true,
    streetViewControl:true,
    overviewMapControl:true,
    rotateControl:true,    
    center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("worldcities.xml", function(data) {
  var markers = data.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
var circleOptions = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.65,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.25,
    map: map,
    center: latlng,
    radius: parseInt(markers[i].getAttribute("population"))/25
    };

    var marker = createMarker(markers[i].getAttribute("name"), latlng,         markers[i].getAttribute("population"), markers[i].getAttribute("countrycode"), markers[i].getAttribute("region"));
var onekmcircle = new google.maps.Circle(circleOptions);
}
 });
}

function createMarker(name, latlng, popl, cntry, rgon) {
    var marker = new google.maps.Marker({
position: latlng, 
map: map,
icon: {
    path: google.maps.SymbolPath.CIRCLE,
scale: 2

    }, 
title: name});
var contentstring = '<b>'+name+'</b>'+'<br>Population: '+popl+'<br>Country: '+cntry+'<br>Region: '+rgon;


google.maps.event.addListener(marker, "click", function() {
  if (infowindow) infowindow.close();
  infowindow = new google.maps.InfoWindow({content: contentstring});
  infowindow.open(map, marker);
  var zoomLevel = map.getZoom();
  map.setCenter(marker.getPosition());
  if (zoomLevel<6)
{
    map.setZoom(6);

}

});



return marker;
}

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

var url ='http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var icon = google.maps.MarkerImage(url);
var currentZoom = map.getZoom();
  if (currentZoom >9){
for(i=0; i< markers.length; i++ ) {
    markers[i].setIcon(icon);

   }
}
});

Answer

Here you go…I fixed your code for you…you had a few errors. Biggest one being that you were not saving the markers you created into an array to loop through on the event listener.

I added the gMarkers array. I ran the code in the console of your site and it worked. Let me know if you have any questions.

 var infowindow;
 var map;
 var gMarkers=[];

  function initialize() {
    var myLatlng = new google.maps.LatLng(20, 0);
    var myOptions = {
        zoom: 3,
        panControl:true,
        zoomControl:true,
        mapTypeControl:true,
        scaleControl:true,
        streetViewControl:true,
        overviewMapControl:true,
        rotateControl:true,    
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("worldcities.xml", function(data) {
        markers = data.documentElement.getElementsByTagName("marker");
    });

    for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
        var circleOptions = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.65,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.25,
            map: map,
            center: latlng,
            radius: parseInt(markers[i].getAttribute("population"))/25
        };

        gMarkers.push(createMarker(markers[i].getAttribute("name"), latlng,markers[i].getAttribute("population"), markers[i].getAttribute("countrycode"), markers[i].getAttribute("region")));
        var onekmcircle = new google.maps.Circle(circleOptions);    
    }


    google.maps.event.addListener(map, 'zoom_changed', function() {
        var url ='http://maps.google.com/mapfiles/ms/icons/red-dot.png';
        var icon = google.maps.MarkerImage(url);
        var currentZoom = map.getZoom();
          if (currentZoom >9){
            for(var i=0; i< gMarkers.length; i++ ) {
                gMarkers[i].setIcon(icon);
            }
          }else{
                for(var i=0; i< gMarkers.length; i++ ) {
                    gMarkers[i].setIcon({path: google.maps.SymbolPath.CIRCLE,scale: 2});
                }
          }
    });

 }


function createMarker(name, latlng, popl, cntry, rgon) {
    marker = new google.maps.Marker({
        position: latlng, 
        map: map,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 2

        }, 
        title: name
    });

    var contentstring = '<b>'+name+'</b>'+'<br>Population: '+popl+'<br>Country: '+cntry+'<br>Region: '+rgon;

    google.maps.event.addListener(marker, "click", function() {
        if (infowindow) infowindow.close();
        infowindow = new google.maps.InfoWindow({content: contentstring});
        infowindow.open(map, marker);
        var zoomLevel = map.getZoom();
        map.setCenter(marker.getPosition());
        if (zoomLevel<6){
            map.setZoom(6);
        }
    });

    return marker;
}
We are here to answer your question about Cannot get a different Icon in Google map on change event - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji