How to make fitBounds aware of custom controls

Question

I have a large (300 * 500px) user control on the left side of my google map. I am putting my markers together. When a user clicks on a marker, I want to enlarge the map to show markers in this cluster.

The problem is this:

When I get the borders of my marker collection, then map.fitBounds(collection_bounds) , I get the markers under my great control. Is there a way to prevent fitBounds from using the entire view port?

I tried to get the LatLng my southwest border point, converting it to pixels, moving it 300 pixels, and then converting it back to LatLng to use it as the new southwest border point. This does not work, because the calculations are done before scaling, so the shift of 300 pixels becomes too big ... I was thinking of writing my own fitBounds , but I got into the same problem as before the increase.

Answer 1

What you said works:

I tried to get the LatLng of my south west by converting it to pixels, moving it 300 pixels, and then converting it back to LatLng for use as the new point of the southwest border.

if you do this in two steps, which is pretty transparent to the user, because it runs so fast that you hardly notice it. So, first you make a normal map.fitBounds(bounds); , where the borders are determined only by your markers, and then you are again tuned using the technique you described. So:

  google.maps.event.addListenerOnce(map,'bounds_changed',function(){ // re-adjust bounds here as you described. // This event fires only once and then the handler removes itself. }); map.fitBounds(bounds); 

Answer 2

I had a panel 400 pixels wide on my right hand.

Starting with a call to zoomWithPoints, which transmits two points for inclusion in the view, the following code implements the approach described below: 1) Scaling to borders 2) Using the obtained scale scale, calculate how much you need to add to "maxLon" 3) Zoom to the borders.

 function zoomToBbox(minLat, minLon, maxLat, maxLon) { var southwest = new google.maps.LatLng(minLat, minLon); var northeast = new google.maps.LatLng(maxLat, maxLon); var bounds = new google.maps.LatLngBounds(southwest, northeast); map.fitBounds(bounds); } function zoomWithPoints(lat1, lon1, lat2, lon2) { var maxLat = Math.max(lat1, lat2); var maxLon = Math.max(lon1, lon2); var minLat = Math.min(lat1, lat2); var minLon = Math.min(lon1, lon2); zoomToBbox(minLat, minLon, maxLat, maxLon); var z = map.getZoom(); //get the zoom level after zooming // Add a bit to maxLon, to result in it panning left by 400 pixels var widthOfPanel = 400; var degreesPerTile = 360 / (Math.pow(2,z)); var degreesPerPx = degreesPerTile / 256; var degreesForPanel = degreesPerPx * widthOfPanel; maxLon = maxLon + degreesForPanel; //zoom (pan across a bit) to take account of the added bit zoomToBbox(minLat, minLon, maxLat, maxLon); map.setZoom(z); //put it back to right zoom level if necessary } ...call zoomWithPoints