如何在Google Maps API v3中一次仅显示一个信息窗口 [英] How to display only one infowindow at a time in google maps api v3

问题描述

我们能否一次在Google地图中显示一个带有多个标记多个窗口的信息窗口的信息窗口.

Can we display only one infowindow at a time in google map with multiple infowindows for multiple markers.

表示，当我单击标记&时隐藏/关闭其他信息窗口.仅显示当前标记的信息窗口.

Means , hide/close other infowindows when i click on a marker & display only current marker infowindow.

谢谢.

推荐答案

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

Here is the javascript code i have used when displaying single marker at a time.

经过将近3个小时的搜索，我发现了这一点，并且如果您以这种方式添加多个标记，也可以通过简单的方式来解决

After a search of almost 3 hours i figured it out and in a simple way if you add multiple markers in this way

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);
            }

这篇关于如何在Google Maps API v3中一次仅显示一个信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！