单击标记时，Google Maps信息框不起作用

Question

I had a google map set up where the infobox was hidden on page load. To open up the infobox I'd click on the custom marker (pin) and the infbox would display. If i was to click the marker the second time, the info box would close.

Now, since the latest google maps. The infobox automatically opens on load and clicking the marker does nothing. Doesn't close, doesn't open.

here is the code for the infobox.

Thanks all !

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

Answer 1

First, skim through this: the reference api . Specifically the part on InfoWindow and InfoWindowOptions .

Then give this a try

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