google map marker manager

Question

Im having some problems displaying 2 different markers depending on the zoom level. For example if the zoom level is less then 10 show icon a, and if the zoom level is more then 10 show icon 2. I've been looking at marker manager but have lost my way a little. Here is my code:

var url = "json.api";

function initialize() {

    var myLatlng = new google.maps.LatLng(0, 0);
    var myOptions = {
        maxZoom: 16,
        zoomControl: true,
        disableDefaultUI: true,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    downloadUrl(url, function(data) {

        var j = eval('(' + response + ')');
        var jlength = j.data.hotels.length;

        var bounds = new google.maps.LatLngBounds();

        for(i=0; i < jlength; i++) {

            var x = parseFloat(j.data.hotels[i].lat);
            var y = parseFloat(j.data.hotels[i].lon);
            var z = new google.maps.LatLng(x,y);
            var title = j.data.hotels[i].title;
            var hotel_id = j.data.hotels[i].id;
            var address = j.data.hotels[i].address;
            var star = j.data.hotels[i].star;
            var thumbnail = j.data.hotels[i].thumbnail;

            var contentstring = 'some html';

            var marker = createMarker();

            var infowindow = new google.maps.InfoWindow({
                content: contentstring
            }); 

            bounds.extend(z);

            map.fitBounds(bounds);

            //NOT SURE IF THESE ARE NEEDED  
            //  zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
            //  google.maps.event.removeListener(zoomChangeBoundsListener);
            //  });
            //  google.maps.event.addListener(map, 'zoom_changed', function() {  
            //  });
        };

        if (map.getZoom() == 21) {map.setZoom(16);}

        if (map.getZoom() < 12) {map.setZoom(map.getZoom()+1);}

        //alert(map.getZoom())

        function createMarker(){

            var marker = new google.maps.Marker({
                position: z,
                map: map,
                title: title,
                html: contentstring,
                icon: 'icona.png'
            });

            google.maps.event.addListener(marker,'click',function(){
                infowindow.setContent(this.html);
                infowindow.open(map,marker);
            });
        };
    });
};

as you see i have a json file which i loop over to get the lat and lng(and other bits) and then create a marker which displays everything in my json file with an info window etc....can i not just create a second marker function ie createMarker2 and some how call that if the zoom is more then 10?...any help would be appreciated. Ive looked at some examples online but have got confused. Thanks in advance.

Answer 1

You have a section commented out which is critical. You need to listen for the zoom_changed event. Checking the map.getZoom() won't accomplish anything unless it's inside this event handler.

google.maps.event.addListener(map, 'zoom_changed', function() {
    // your zoom logic goes here
    var zoom = map.getZoom();
    if (zoom < 10) {
      // do something  
    } else {
      // do something else
    }
});

I'll leave the rest of the exercise to you - but likely you'll need to add each marker to an array of markers, and iterate those markers to conditionally turn then on / off. One tip for you - you can actually add additional properties to the marker object to inspect when you're looping. For example, you could add a marker.LessThan10 = true; to the marker object. Then, when looping you could look for this property above and call marker.setVisible(); as applicable.