Question

I have a simple question, and hopefully there is a simple answer . . . I just can’t find it after a couple of hours of searching.

I’ve got a standard google map with a bunch of markers. I have a click event on each marker so that when clicked, the map pans the marker to the center and zooms in on it. No issues there.

Now I want to change the event handler so that when a marker is clicked the map recenters so that the marker is centered horizontally, but it is vertically towards the top of the map canvas. Is there a relatively straight forward way of doing this that works across different zoom levels?

Thanks,
Chuck

Answer 1

There may be many ways, e.g.

google.maps.event.addListener(marker, 'click', function() {
          this.getMap().setCenter(this.getPosition());
          this.getMap().panBy(0,(this.getMap().getDiv().offsetHeight/2)+this.anchorPoint.y);
        });

It puts the marker in the center and then pans the map vertically by (mapHeight/2-markerHeight)