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