谷歌地图infowindow关闭不工作

Question

I have a google map contained in this fiddle

When you click on the pins they popup some information as expected and when you click on the x it closes the infowindow.

However when I click on the first pin, then click on additional pins (without clicking the x) the infowindows just keep poping up without removing the other ones. how can I restructre my code to get this working?

Html

    <div id="map_canvas"></div>

Style

    #map_canvas {
        float: left;
        height: 565px;
        width: 100%;
    }
    #content {
        min-width: 320px;
    }

JS

    var mylatlongs = [
                        {"rank":1,"name":"name 1","lat":"-25.901820984476252","lng":"135"},
                        {"rank":2,"name":"name 2","lat":"-25.901820984476252","lng":"135.05"},
                        {"rank":3,"name":"name 3","lat":"-25.901820984476252","lng":"135.025"}
                    ];
    var infowindow = null;
    jQuery(function() {
            var StartLatLng = new google.maps.LatLng(mylatlongs[0]['lat'], mylatlongs[0]['lng']);
            var mapOptions = {
                center: StartLatLng,
                streetViewControl: false,
                panControl: false,
                maxZoom:17,
                zoom : 13,
                zoomControl:true,
                zoomControlOptions: {
                    style:google.maps.ZoomControlStyle.SMALL
                }
            };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        jQuery.each( mylatlongs, function(i, m) {
            var StartLatLng = new google.maps.LatLng(-25.901820984476252, 134.00135040279997);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(m.lat, m.lng),
                bounds: true,
                id : 'mk_' + m.rank,
                letter : m.index,
                map: map,
                title: m.name
            });

            google.maps.event.addListener(marker, 'click', function() {
                if (infowindow) {
                    infowindow.close();
                }
                infowindow.open(map,marker);
                position: new google.maps.LatLng(m.lat, m.lng);
            });

            var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">'+ m.name + '</h1>'+
              '<div id="bodyContent">'+ (m.rank) +
              '</div>'+
              '</div>';

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

        });
    });

Answer 1

You have one info window for each marker, and one local variable for each one. When you try to close the previosuly opened info window, you are closing the one that belongs to the clicked marker instead.

Create a single info window outside of the loop, and set the content of it in the click event so that it gets updated for the marker where you show it:

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

        jQuery.each( mylatlongs, function(i, m) {
            var StartLatLng = new google.maps.LatLng(-25.901820984476252, 134.00135040279997);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(m.lat, m.lng),
                bounds: true,
                id : 'mk_' + m.rank,
                letter : m.index,
                map: map,
                title: m.name
            });

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

            var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">'+ m.name + '</h1>'+
              '<div id="bodyContent">'+ (m.rank) +
              '</div>'+
              '</div>';

        });

Demo: http://jsfiddle.net/Guffa/GSX6G/3/

Answer 2

        google.maps.event.addListener(marker, 'click', function() {
            if(marker.open){
                infowindow.close();
                marker.open = false;
            }
            else{
                infowindow.open(map,marker);
                marker.open = true;
            }
            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
                marker.open = false;
            });
        });

Answer 3

Define global objects

var infowindow;

Updated this demo

Answer 4

This is stated by google themselves. By creating the InfoWindow outside the event handler, we ensure that there only exists one InfoWindow at a time. If we had put the code for creating the InfoWindow inside the event handler we would have created a new InfoWindow each time the marker was clicked. Leaving us with several identical InfoWindows on top of each other.

This means if you declare infoWindow inside of the event handler like:

 google.maps.event.addListener(marker, "click", function (e){
     var infoWindow = new google.maps.InfoWindow();
     infoWindow.setContent(props.content);
     infoWindow.open(map,marker);
 });

Then the infoWindows will keep popping up as you click on the markers

However if they the infoWindow is global like:

 var infoWindow = new google.maps.InfoWindow();

 google.maps.event.addListener(marker, "click", function (e){

     infoWindow.setContent(props.content);
     infoWindow.open(map,marker);
 });

OR

var infoWindow;
google.maps.event.addListener(marker, "click", function (e){
     infoWindow = new google.maps.InfoWindow();
     infoWindow.setContent(props.content);
     infoWindow.open(map,marker);
 });

Then you will have only one InfoWindow Popping up