Question

I’m using Google Fusion Table API and Google Maps API. I have my maP thanks to Google Maps API, then I create a layer using Google Fusion Table API, works great.

When I create the layer I define that the markes should be “small_red” (the small red dots), thants works great too.

var layer = new google.maps.FusionTablesLayer({query: {select: 'coordenadas', from: '1-zmpFV_oI7OBiq3iEyHyze7QBiBDZzdrxby_TYM', where: 'hide!=0'},map: map, suppressInfoWindows: true, styles: [{ markerOptions: {iconName: "small_red" }}]});

Now, as you can see below, I want to change the icon to “large_red” (the Google Maps normal one) when the user zoom in, and back to “small_red” (again, the red dots) when the user zoom put.

google.maps.event.addListener(map, 'zoom_changed', function() {
    if(map.getZoom()>14){
        //Change icon to large_red
    } else {
        //Back to small_red
    }
});

This last code recognize the zoom in or out event, then I have an if clause to verify if the zoom goes up or down, and then, the problem, I don’t know how to change the icons from the markers on the layer over the map.

Thanks in advance for any help.

Answer 1

I found the solution, simple:

google.maps.event.addListener(map, 'zoom_changed', function() {
    if(map.getZoom()>14){
        layer.setOptions({styles: [{markerOptions:{ iconName:"large_red"}},]});
    } else {
        layer.setOptions({styles: [{markerOptions:{ iconName:"small_red"}},]});
    }
});