How to change Google map infowindow close button position?

Question

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..!

Solution 1

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.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
          opacity: 0.75,
          width: "280px"
         },
        closeBoxMargin: "10px 20px 2px 2px",
        closeBoxURL: "http://www.google.com/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 complete example at jsbin. closeBoxMargin is set to "10px 20px 2px 2px", so close box should have 20px margin on the right side.

Solution 2

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.net/close.png") !important;
}

Comments

[Rahul Gupta]

Could you create a working fiddle of so far what you have tried ?