Showing sets of markers on different layers of Google map

Question

I need to show a set of markers on a Google map. I know markers can be added directly on a Google map but given that I have 3 sets of markers, one for shops, one for parks and another one for hotels, how can I show them on 3 different layers and so that later on using javascript, I be able to hide one set of markers by doing sort of:

myLayer2.setMap(null);

I have checked Panoramio layer but it needs the images first to be uploaded to panoramio, but in my case for some particular security reason I cannot upload them to panoramio. I will have images locally and set those at runtime based upon some criteria.

Is there some way to do layer based work without using panoramio approach?

Answer 1

The Maps-API doesn't support this kind of custom layers(as you maybe know them from other map-API's like e.g. leaflet).

But it's not hard to achieve a similar feature.

You may use a google.maps.MVCObject. for every "layer" create a property for this MVCObject and set the value of this property to null or the google.maps.Map-instance( depending on the desired initial state of the "layer")

var myLayers=new google.maps.MVCObject();
    myLayers.setValues({parks:null,shops:null,hotels:map});
    //hotels initially are visible

When you want to add a Overlay...e.g. a Marker, to a "layer", bind the map-property of that Overlay to the related property of the MVCObject:

   parkMarker=new google.maps.Marker({/*options*/});
   parkMarker.bindTo('map',myLayers,'parks');

To toggle the display of all features within that "layer" you only need to set the property of the MVCObject:

//show the parks
myLayers.set('parks',map);
//hide the hotels
myLayers.set('hotels',null);

Demo: http://jsfiddle.net/doktormolle/UA85N/