CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-maps-markers
grammar
grammar

Reputation: 871

Google Maps Infobox, close button does not seem to work

I'm working on a Google Maps app, and using the infobox plugin from Google I've run into a bit of trouble.

It seems that the close button no longer wants to work on the infoboxes, which is strange because I did have it working before, as I am turning a kiosk app into a web app. I am using a custom close button for this, but even if I switch it to google's default close button I get the same result. The infobox only closes when you click another marker on the map to open another infobox. Once one is open, it seems to be impossible to remove it. The code has not changed from the kiosk to the web version of this app...

Here is some code I'm using to instantiate the markers:

var displayingInfoBox;

// Options for the infobox
var popoverOptions = {

        disableAutoPan : false,
        maxWidth : 0,
        closeBoxMargin : '8px 32px',
        closeBoxURL : 'url/to/close_button/image.png',  
        infoBoxClearance : new google.maps.Size(50,50),
        isHidden : false,
        enableEventPropagation : true,

        boxStyle: {
            border      : 'none',
            opacity     : 1.0,
            background  : "transparent url( 'url/to/background/image.png' ) no-repeat 0 0",
            width: "266px",
            height: "109px"
        }
    };

// Add listener to the marker to open the overlay -- where popupInfo is the content to display inside the popover and marker is the marker on the map
google.maps.event.addListener(marker, 'click', function( event ) {
        createOverlay( marker, popupInfo, new google.maps.Size(-35, -235))
    });

// Method to show in the overlay
function createOverlay(marker_, content_, offset_) {

    // close the previous overlay if there was one.
    VW.Map.closeInfoBox();

    // set the provided content to the popover options
    popoverOptions.content = content_;
    popoverOptions.pixelOffset = offset_;

    // use the infobox lib to create an overlay
    displayingInfoBox = new InfoBox(popoverOptions);

    // show the overlay over the marker passed in
    displayingInfoBox.open(myMap, marker_);

    // return in case the caller wants to do something with this.
    return displayingInfoBox;
}

Any help with this is much appreciated.

Thanks in advance!

EDIT -- I am using the INFOBOX API, and not the InfoWindow object from the maps API. This is what I'm talking about: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html

Graham

Upvotes: 1

Views: 3515

Answers (1)

Ben
Ben

Reputation: 191

I had this problem. I used my main CSS stylesheet to style my infobox rather than boxStyle in the Javascript. When I had the opacity setting on anything other than 1.0 (or removed altogether) the close button would be visible but would not work. My advice would be to check to make sure your infobox does not inherit opacity from anywhere else.

Upvotes: 1

Related Questions