Question

10

How to change Google map infowindow close button position?

rated 0 times [ 11] [ 1] / answers: 1 / hits: 17867 / 10 Years ago, fri, june 6, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadyngraysons

Add To Favorites

Follow

Total Points: 455

Total Questions: 109

Total Answers: 98

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

jadyngraysons questions

1 AWS Lambda SNS Destinations not working on failure or success

Fri, Aug 14, 20, 00:00, 4 Years ago

1 React Hooks useState Array empty with states rendered in the component

Tue, May 5, 20, 00:00, 4 Years ago

1 postman pm set environment variable

Thu, Apr 23, 20, 00:00, 4 Years ago

1 getElementById after dynamically adding it in React

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How to customise Intl.DateTimeFormat date?

Tue, Dec 31, 19, 00:00, 4 Years ago

View All

answered 10 Years ago sylviakaitlinj · Accepted Answer

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.