javascriptgoogle-mapsgoogle-maps-api-3infobox

Google maps InfoBox is changing position while zooming


Is this a common problem by people? here screenshots of the issue in this one it is positioned right: http://s23.postimg.org/qqglxorkr/Screen_Shot_2016_04_06_at_16_11_31.png

Here it is zoomed in but the infoBox is not positioned right. http://s27.postimg.org/f1i9ouryr/Screen_Shot_2016_04_06_at_16_11_08.png

Does someone knows how to line out this infobox no matter what above the house?

I had something in common here you can see the issue: How do i access all my google maps markers

Code below shows how it is setup:

for (i = 0; i < locations.length; i++) {
        var myLatLng = {lat: locations[i][0].lat, lng: locations[i][0].lng};

    marker = new google.maps.Marker({
        position: myLatLng,
        icon: icon1,
        map: map
    });

    setInfoWindow(marker);
    setMarker(marker);
    setMarkerSize(marker);
}

function setInfoWindow(marker) {
    var infobox = new InfoBox({
        content: contentString,
        disableAutoPan: false,
        maxWidth: 170,
        pixelOffset: new google.maps.Size(-110, -50),
        zIndex: null,
        alignBottom: true,
        boxStyle: {
            background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
            opacity: 1,
            width: "200px"
        },
        closeBoxMargin: "12px 4px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1)
    });

   map.addListener('zoom_changed', function() {
        if (map.getZoom() === 18) {
            infobox.pixelOffset = new google.maps.Size(-110, -190);
            console.log(infobox.pixelOffset)
        }
    });
}

It is logging the new values but it is not changing its position.


Solution

  • About the hours of frustration, we understand. We've all been there, it goes with the turf.

    Try this instead:

    infobox.setOptions({pixelOffset: new google.maps.Size(-110, -190)});

    Google maps objects typically do not update their appearance when you set properties directly.