CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
Elaine Marley
Elaine Marley

Reputation: 2213

How to close infobox on zoom out

I have a map with some markers and markerclusters and it's working fine. I added InfoBoxes to them and they work but the problem is, when I zoom out and an InfoBox is open, the marker will disappear (and get aded to the markercluster) and the box will stay there, open with no marker below.

I could work with the simple solution of having all infoboxes close on zoom change but I can't even achieve that. The problem I have is that inside my listener I can't access my markers for some reason. Here is my code:

var infoList = [];

function initialize() {
    var mapOptions = {
      ...
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);
    var imageUrl = 'pin.png';
    var markers = []; 
    var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(51, 71));

    for (var i = 0; i < data.photos.length; i++) { 
        var dataPhoto = data.photos[i];
        var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
        var marker = new google.maps.Marker({
            position: latLng,
            icon: markerImage,
            title: dataPhoto.photo_title
        });
        boxText = document.createElement("div"),

        infoboxOptions = {
            alignBottom:true,
            content: boxText,
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-60, -70),
            zIndex: null,
            boxStyle: { 
              width: "280px"
             },
            closeBoxMargin: "12px 4px 2px 2px",
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };

        markers.push(marker);

        markers[i].infobox = new InfoBox(infoboxOptions);

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                markers[i].infobox.open(map, this);
                map.panTo(latLng);
            }
        })(marker, i));

    }

    var markerCluster = new MarkerClusterer(map, markers);

    google.maps.event.addListener(map, 'zoom_changed', function(markers){
        /*Here markers is undefined*/
        if (! markers.length) { return; }
        for (i in markers) {
           markers[i].infoBox.close();
        }

    });
}
    google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 1

Views: 1473

Answers (2)

geocodezip
geocodezip

Reputation: 161334

You are creating a new "markers" variable inside the zoom_changed listener. Remove "markers" from the arguments list:

google.maps.event.addListener(map, 'zoom_changed', function(){
    if (! markers.length) { return; }
    for (i in markers) {
       markers[i].infobox.close();
    }
});

Your code is not consistent, the property of marker that you are creating is:

markers[i].infobox = new InfoBox(infoboxOptions);

I changed the above (should have been obvious to you in the debugger).

Upvotes: 2

Bhavik Patel
Bhavik Patel

Reputation: 772

As you mentioned, if you want to close all info window in you map at zoom out or zoom in then you can use this code. It will Help you.

google.maps.event.addListener(map, 'zoom_changed', function() {
infoWindow.close();
});

Upvotes: 0

Related Questions