如何一次只显示一个infowindow在google maps api v3

Question

我们可以在google map中一次只显示一个infowindow，多个infowindows可以显示多个标记。

手段，隐藏/关闭其他infowindows当我点击标记&只显示当前标记infowindow。

谢谢。

Answer 1

这里是我一次显示单个标记时使用的javascript代码。

搜索近3小时后，我想通了，并以简单的方式，如果你用这种方式

var markerArray=[]; 

    for (var i = 0; i < markers.length; i++) 
      { 
       var newMarker = new google.maps.Marker({ 
        map: map, 
        position: new google.maps.LatLng(markers[i].Latitude, markers[i].Longitude), 
        title: markers[i].Name + ", "+ markers[i].Address, 
        draggable: false 
       }); 

       var statusStr; 
       //Set marker icon depending upon current stage 
       switch (markers[i].Stage) 
       { 
        //Stage 1 - Brochure 
        case 5: newMarker.setIcon(stage1MarkerImage); 
         statusStr = 'Current Status - <select id="status"> <option id="5" value="Brochure" selected="selected">Brochure</option><option id="6" value="Demo">Demo</option><option id="7" value="Site Visit">Site Visit</option><option id="8" value="Lease Approval">Lease Approval</option></select>'; 
         break; 
         //Stage 2 - Demo 
        case 6: newMarker.setIcon(stage2MarkerImage); 
         statusStr = 'Current Status - <select id="status"> <option id="5" value="Brochure" >Brochure</option><option id="6" value="Demo" selected="selected">Demo</option><option id="7" value="Site Visit">Site Visit</option><option id="8" value="Lease Approval">Lease Approval</option></select>'; 
         break; 
         //Stage 3 - Site Visit 
        case 7: newMarker.setIcon(stage3MarkerImage); 
         statusStr = 'Current Status - <select id="status"> <option id="5" value="Brochure" >Brochure</option><option id="6" value="Demo" >Demo</option><option id="7" value="Site Visit" selected="selected">Site Visit</option><option id="8" value="Lease Approval">Lease Approval</option></select>'; 
         break; 
         //Stage 4 - Lease Approval 
        case 8: newMarker.setIcon(stage4MarkerImage); 
         statusStr = 'Current Status - <select id="status"> <option id="5" value="Brochure" >Brochure</option><option id="6" value="Demo" >Demo</option><option id="7" value="Site Visit" ><Site Visit/option><option id="8" value="Lease Approval" selected="selected">Lease Approval</option></select>'; 
         break; 
       } 



       newMarker["infoWindow"] = new google.maps.InfoWindow({ 
        content: 
       '<div class="infoWindow">' + 
       '<header>' + markers[i].Name + '</header>' + 
       '<div style="clear: both;"></div>' + 
       '<div class="content">' + 
       '<p>' + markers[i].Address + ', ' + markers[i].City + ', ' + markers[i].State + ', ' + markers[i].CountryName + '</p>' + 
       '<p>' + 
       statusStr+ 
       '<label id="update-status" onclick="updateCustomerStep(this);" data-id="' + markers[i].Id + '" >Update</label>' + 
       '</p>' + 
       '</div>' + 
       '</div>' 
       }); 

       google.maps.event.addListener(newMarker, 'click', function() { 

        for (var i = 0; i < markerArray.length; i++) 
        { 
         var currentMarker = markerArray[i]; 
         currentMarker["infoWindow"].close(); 
         console.log(currentMarker); 
        } 

        this['infoWindow'].open(map, this); 

       }); 

       markerArray.push(newMarker); 
      } 

Answer 2

我用你的一个位代码发挥各地，并与该结束了添加多个标记：

var markerArray = [];//necessary??? 

var infoHTML = '<div class="infoWindow"><header></header><div style="clear: both;"></div><div class="content"><p class="address"></p><p>Current Status - <select id="status"> <option value="5">Brochure</option><option value="6">Demo</option><option value="7">Site Visit</option><option value="8">Lease Approval</option></select><label>Update</label></p></div></div>'; 

//One infoWindow with dynamic content 
var infoWindow = new google.maps.InfoWindow({ 
    content: infoHTML 
}); 

$(infoWindow).find("label").on('click', function() { 
    var stage = $(this).prev("select").val(); 
    var marker = $(this).data('marker') 
    marker.data.Stage = stage; 
    updateCustomerStep(marker, stage); 
}); 

function openInfoWin() { 
    var data = this.data; 
    var $infoWindow = $(infoWindow); 
    var $select = $infoWindow.find("select").val(data.Stage); 
    $infoWindow.find("label").data('marker',this); 
    $infoWindow.find("header").text(data.Name); 
    $infoWindow.find(".address").text([data.Address, data.City, data.State, data.CountryName].join(', ')); 
    infoWindow.open(map, this); 
} 

for (var i = 0; i < markers.length; i++) { 
    var data = markers[i]; 

    newMarker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(data.Latitude, data.Longitude), 
     title: data.Name + ", " + data.Address, 
     draggable: false 
    }); 

    //Set marker icon depending upon current stage 
    switch (data.Stage) { 
     case 5: newMarker.setIcon(stage1MarkerImage); break;//Stage 1 - Brochure 
     case 6: newMarker.setIcon(stage2MarkerImage); break;//Stage 2 - Demo 
     case 7: newMarker.setIcon(stage3MarkerImage); break;//Stage 3 - Site Visit 
     case 8: newMarker.setIcon(stage4MarkerImage); break;//Stage 4 - Lease Approval 
    } 

    newMarker.data = data; 
    google.maps.event.addListener(newMarker, 'click', openInfoWin); 
    markerArray.push(newMarker);//necessary??? 
} 

注：

• 未经检验
• 状态选项现在具有与id相同的值。
• markerArray不再需要，除非在代码中使用elewhere。
• 函数updateCustomerStep将需要修改为具有形式变量（标记，阶段）。

Answer 3

我解决了它是遵循

var infoWindowsOpenCurrently;// A temporarily variable to save currently opened info window 
google.maps.event.addListener(marker, 'click', function() { 
    typeof infoWindowsOpenCurrently !== 'undefined' && infoWindowsOpenCurrently.close();//if variable is defined close 
    infowindow.open(map, marker); 
    infoWindowsOpenCurrently = infowindow;//set current info window to temporary variable 
});