Extending Google Map (v3) LatLngBounds by a certain number of pixels

I'm looking to take my cu开发者_JS百科rrent map bounds (like so: var b = map.getBounds();) and extend it by a certain number of pixels in every direction. Essentially I'm looking to pad the bounds by 256px. Is this possible?

You can try something along these lines:

var overlay = new google.maps.OverlayView(); 
overlay.draw = function() {}; 
overlay.setMap(map); 
var projection = overlay.getProjection();  
// Get pixels:    
var sw = projection.fromLatLngToDivPixel(bounds.getSouthWest());   
var ne = projection.fromLatLngToDivPixel(bounds.getNorthEast());    

See also Custom Overlays.

The answer given may work but the problem is that the function

overlay.getProjection()

always returns undefined until the map is displayed. This means that you can't extend your bounds until the map has displayed, and then it has to be displayed again - more processing and a possible blippy experience for the end user.

I think I found a way of extending bounds by pixels which does not require the map to be refreshed and can be calculated before the map is rendered. Its based on the fact that the bounds object will cover the width of the map, and we know the pixels of the width of the map from its container, so the ratio of the two gives us a longitude to pixels ratio

                // extend bounds to allow for 250 pixels of label width
                var ne = bounds.getNorthEast();
                var sw = bounds.getSouthWest();
                var lng = ne.lng();
                var diff = lng - sw.lng();
                var newlng = lng + 250 * diff / targetwidth;

                var lat = sw.lat();
                var diff2 = lat - ne.lat;
                var newlat = lat + 100 & diff2 / targetheight;

                var point = new google.maps.LatLng(newlat, newlng);
                bounds.extend(point);

                // fit the map to these bounds
                thismap.fitBounds(bounds);

The above does width and height. If you only want to extend the width:

                // extend bounds to allow for 250 pixels of label width
                var ne = bounds.getNorthEast();
                var sw = bounds.getSouthWest();
                var lng = ne.lng();
                var diff = lng - sw.lng();
                var newlng = lng + 250 * diff / targetwidth;

                var lat = sw.lat();

                var point = new google.maps.LatLng(newlat, newlng);
                bounds.extend(point);

                // fit the map to these bounds
                thismap.fitBounds(bounds);

In both cases the variable "targetwidth" is the numerical width in pixels of the div containing the map.

HTH :)