Change the position of info window while zoom in/out the google map

Question

I'm using a snazzy google map plugin in my website. But there exists an issue that is, the info window retains in the same position when the google map zooms in/out. How can we change the info window position depends on the google map?

Answer 1

You would need to track position on zoom, and manualy place the window.

Use this for detecting zoom:

  map.addListener('zoom_changed', function() {
    infowindow.setContent('Zoom: ' + map.getZoom());
  });

Then get DOM element and swap its positions, how ever. If you would make your DOM element on fixed or absolute positon it shouldnt change. If you want to make it using google maps api. You could use this:

infobox = new InfoBox({
         content: document.getElementById("infobox"),
         disableAutoPan: false,
         maxWidth: 150,
         pixelOffset: new google.maps.Size(-140, -45),
         zIndex: null,
         boxStyle: {
            background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') 0% 100% no-repeat",
            opacity: 0.75,
            width: "280px"
        },
        infoBoxClearance: new google.maps.Size(1, 1),
        alignBottom: true
    });

infobox is your DOM element, which will take content from. alignBottom: makes it so it would allways stick on bottom.

If you would like to customize its position on zoom, use the zoom event listener and then swap its offsets.

var ib= new InfoBox({
    ....//other properties,
    pixelOffset: new google.maps.Size(-25, 0) //where your marker's height is 25px
});

Sources:

Fitbounds [Stackoverflow]

Info Box position[Stackoverflow]