单击标记时谷歌地图信息框不起作用答案

【问题标题】：Google Maps infobox not working when clicking marker单击标记时谷歌地图信息框不起作用
【发布时间】：2013-08-22 12:41:41
【问题描述】：

我设置了一个谷歌地图，其中信息框在页面加载时隐藏。要打开信息框，我会单击自定义标记（图钉），然后会显示信息框。如果我第二次点击标记，信息框就会关闭。

现在，自从最新的谷歌地图。信息框会在加载时自动打开，单击标记不会执行任何操作。不关闭，不打开。

这是信息框的代码。

谢谢大家！

 // infobox
            var $infoboxText =
                $('<div class="inner">').html(contentHtml);

            var myOptions = {
                boxClass:'gmap_infobox',
                content:$infoboxText.get(0),
                disableAutoPan:false,
                maxWidth:0,
                alignBottom:false,
                pixelOffset:new google.maps.Size(0, 0),
                zIndex:null,
                closeBoxURL:"",
                infoBoxClearance:new google.maps.Size(1, 1),
                isHidden:false,
                pane:"floatPane",
                enableEventPropagation:false
            };

            var InfoBoxClose = function () {
                myOptions.boxClass = 'gmap_infobox';
                ib.setOptions(myOptions);
            };

            var InfoBoxOpen = function () {
                var $content = $(myOptions.content);

                if ($content.html().length > 0) {
                    myOptions.boxClass = $content.is(':visible') ? 'gmap_infobox' : 'gmap_infobox gmap_infobox--visible';
                    ib.setOptions(myOptions);
                }
            };

            InfoBox.prototype.getCloseClickHandler_ = function () {
                return handleInfoBoxClose;
            };

            var ib = new InfoBox(myOptions);
            ib.open(map, marker);

            if (config.marker === 'open-bubble') {
                InfoBoxOpen();
            }

            // listeners
            google.maps.event.addListener(marker, 'click', function() {
                InfoBoxOpen();
            });
        }

【问题讨论】：

您要做的只是通过单击标记来打开和关闭信息窗口，对吗？
你在哪里new google.maps.InfoWindow(myOptions);？
没错，这就是我想要实现的。我称 var ib = new InfoBox(myOptions); ?我想我错过了 google.maps 部分？

标签： javascript google-maps google-maps-api-3

【解决方案1】：

首先，浏览一下：the reference api。特别是InfoWindow 和InfoWindowOptions 上的部分。

那就试试吧

var map, myInfoWindow;
function initialize() {
    //Create the map
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(38.8282, -98.5795),
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

    //Create the infoWindow
    var iwOptions = {content: "stuff"};    //put your infowindow options here
    myInfoWindow = new google.maps.InfoWindow(iwOptions);

    //coordinates for marker placement
    var myLatLng = [
                    new google.maps.LatLng(32, -83),
                    new google.maps.LatLng(41, -90),
                    new google.maps.LatLng(38, -109)
                   ];

    //Create markers
    for(var i=0; i<myLatLng.length; i++){
        var marker = new google.maps.Marker({
            position: myLatLng[i],
            map: map
        })

        //This is the important part: add this to each of you markers
        google.maps.event.addListener(marker, 'click', function(){
            if( myInfoWindow.anchor === this ){
                myInfoWindow.close();
            } else {
                myInfoWindow.open(map, this);
            }
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

【讨论】：