javascript - How to change Google map infowindow close button position? - Stack Overflow

admin管理员组

文章数量:1313313

I have gone through several articals and wasted a lot of time to do this. My javascript seems like below. I have already used closeBoxMargin property but it is not working.

function addBasicInfoWindow(map, marker, contentStr) {
    var infoBoxOptions = {
            content: contentStr,
            pixelOffset: new google.maps.Size(0, 15),
            disableAutoPan: false,
            closeBoxMargin: "10px 0px 2px 2px",
            closeBoxURL: "http://localhost:8080/DummyMap/images/mapClose.png",
            infoBoxClearance: new google.maps.Size(1, 1),
            enableEventPropagation: false,
        };
    //alert(infoBox.innerHTML);
    try {
        var infowindow = new google.maps.InfoWindow(infoBoxOptions);

        infowindow.open(map,marker);
    } catch (ex) {
        alert(ex);
    }
}

I have reffered Google Map v3 InfoBox and closeBox and Google Map API v3 ~ Simply Close an infowindow? but nothing works for me.

Thanx in advance for a favorable solution..!

I have gone through several articals and wasted a lot of time to do this. My javascript seems like below. I have already used closeBoxMargin property but it is not working.

function addBasicInfoWindow(map, marker, contentStr) {
    var infoBoxOptions = {
            content: contentStr,
            pixelOffset: new google.maps.Size(0, 15),
            disableAutoPan: false,
            closeBoxMargin: "10px 0px 2px 2px",
            closeBoxURL: "http://localhost:8080/DummyMap/images/mapClose.png",
            infoBoxClearance: new google.maps.Size(1, 1),
            enableEventPropagation: false,
        };
    //alert(infoBox.innerHTML);
    try {
        var infowindow = new google.maps.InfoWindow(infoBoxOptions);

        infowindow.open(map,marker);
    } catch (ex) {
        alert(ex);
    }
}

I have reffered Google Map v3 InfoBox and closeBox and Google Map API v3 ~ Simply Close an infowindow? but nothing works for me.

Thanx in advance for a favorable solution..!

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited May 23, 2017 at 11:53 CommunityBot 111 silver badge asked Jun 6, 2014 at 4:57 MadusankaMadusanka 3,01855 gold badges3131 silver badges4141 bronze badges 1

• Could you create a working fiddle of so far what you have tried ? – Rahul Gupta Commented Jun 6, 2014 at 5:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

It seems that problem is not how to change close button position but how to open InfoBox. You are calling InfoWindow constructor with options for InfoBox but you have to create InfoBox with proper options instead.

Arranged from google example about infobox:

function addBasicInfoWindow(map, marker, contentStr) {
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

    var myOptions = {
        content: boxText,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: { 
          background: "url('http://google-maps-utility-library-v3.googlecode./svn/trunk/infobox/examples/tipbox.gif') no-repeat",
          opacity: 0.75,
          width: "280px"
         },
        closeBoxMargin: "10px 20px 2px 2px",
        closeBoxURL: "http://www.google./intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    };

    google.maps.event.addListener(marker, "click", function (e) {
        ib.open(map, this);
    });

    var ib = new InfoBox(myOptions);

    ib.open(map, marker);
}

See plete example at jsbin. closeBoxMargin is set to "10px 20px 2px 2px", so close box should have 20px margin on the right side.

it took a while, but I eventually figured it out, the code below will need to be amended for your own google map tag id.

the following code overwrites a transparent gif which is the click area with an image of your choice and at the right position - you'll need to play with right and top to get it right for your infoWindow

#MyGoogleMapTag > div > div > div:nth-child(1) > div:nth-child(4) > div:nth-child(4) > div > img {
    right: 45px !important;
    top: 7px !important;
    background-image:url("http://appsavvy/close.png") !important;
}

This can be done with CSS:

#map div[role="dialog"] button[title="Close"] {
    right: 10px !important;
    top: 10px !important;
}

You will need to replace #map with your map container element.

If Google change the markup this may no longer work, and it may also target other similar dialog type elements (which may or may not be what you want).

本文标签： javascriptHow to change Google map infowindow close button positionStack Overflow