Google maps: zoom in/out with panning to specific point like in maps.google.com context menu

I have a project with google maps. I开发者_运维问答 want to emulate maps.google.com context menu with Zoom in and Zoom out actions.

The google.maps.Map.setZoom() is zooming map to the center point but in maps.google.com when you right click at the specific point and select Zoom In/Out action, map is panning so that this specific point stays at the same place.

For example, if I right click on the point in the left-top corner and select Zoom in in context menu, then this pont stays under cursor after zoom and doesn't go out of the map border.

Is there an easy way to implement this feature?

You could handle it with markers. I don't know if it's the most efficient way.

So you add a marker where your current mouse position is (you can track your mouse cursor, right? Haven't done anything last time with it) Then you set the map centre to that marker (i know, that there is a function for it) and just delete the marker.

Edit: oh sorry, i guess i misunderstood your problem. Cuz that would be the same as double clicking a point right? So you want to have the distance mouse<->top and mouse<->left on the sceen stays as it is with the point under it, but one stage more zoomed in/out?

An equivalent problem was asked and answered at: Zoom toward mouse (eg. Google maps).

My approach to the problem is along the same lines, except that my map pixel coordinates are all calculated relative to the centre of the map (rather than top-left corner):

1. Determine the pixel offset of your Specific Point relative to the Center of the map. The Map Rectangle dimensions in pixels can be obtained something like map.getDiv().getClientRects()[0] and the Center is just the center of the rectangle.
2. Calculate what the new pixel offset of the Specific Point will be after zoom in/out. For a Google Maps zoom in all pixel offsets are doubled (for a single zoom step) so if your Specific Point was [30, 40] from the Centre, it will be [60, 80] from the Map Centre after a normal zoom in (or it will be [15, 20] after a normal zoom out.)
3. Calculate how much you need to adjust the Map Center after zoom, so the Specific Point is back where it began. In the above example, after zoom in we would need to map.panBy(-30, -40), alternatively after zoom out we would need to map.panBy(15, 20).
4. Apply the normal map.setZoom(zoom) followed by calculated map.panBy(dX, dY) to recenter.