Google Maps infobox not working when clicking marker

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

All you are trying to do is open and close an info-window by clicking on a marker, correct? — Xion Dark
Also where do you new google.maps.InfoWindow(myOptions); ? — Xion Dark
That's correct, it's all i would like to achieve. i call the var ib = new InfoBox(myOptions); ? I guess i'm missing the google.maps part? — vzeke

Xion Dark Xion Dark · Accepted Answer · 2013-08-23T17:38:35

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

Google Maps infobox not working when clicking marker

1 Answers