Question

As pointed out in the question Keeping the InfoWindow in view when zooming map in, there appears to be a change with the v3 API that effects the default behavior when InfoWindows are visible.

Google’s default behavior on their own map site (http://goo.gl/maps/8ymit) accounts for this by handling zooming differently. It appears that the “center” of the zoom is set to the marker position if the currently selected marker is visible within the viewport; otherwise it defaults to the center of the map (or the location of the mouse in cases of double-click or mouse wheel scrolling).

How can I duplicate the behavior of the Google Maps site? I know how to get the location of the currently selected marker and to tell if it is visible. However, I have not had any luck setting the “center” of the zoom activity separately from setting the center of the map.

Answer 1

The solution involves a lot of math. Here’s the general outline:

1. Calculate the physical distance (usually in meters) shown between two edges of the current map viewport at the current zoom level.
2. Determine the pixel distance from the nearest edge for the marker.
3. Determine the distance shown between two edges of the current map at the new zoom level.
4. Using the pixel distance from step 2, calculate what the new map center should be to keep the marker in the same relative location.
5. Set the map zoom level and center point.

Resources

• Converting between Pixel and LatLng Coordinates
• Spherical Geometry Library