0

I'm looking to take my current 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?

3 Answers 3

1

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.

3
  • Creating a custom overlay just to calculate new bounds seems a little heavy, though. Surely there's a way without needing to instantiate a new object?
    – ndg
    Aug 29, 2011 at 9:41
  • I think there is no other way. Creating one OverlayView is harmless. You surely have a lot of other objects in your Maps app.
    – Jiri Kriz
    Aug 29, 2011 at 11:00
  • I didn't like it either at first but it is actually the solution! Only thing is that you need to wait after setMap to be able to retrieve the Projection
    – Akxe
    Jul 29, 2021 at 15:03
0

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 :)

0

I know it's been four years but here's my solution, for anyone who's looking:

/**
 * Calculate the needed coordinates to create square bounds of a certain pixel size around a centerpoint.
 *
 * @param {number} offsetPixels the size of the bounds, in pixels
 * @param {google.maps.LatLng} centerPoint the coordinates for the center of the bounds
 * @param {google.maps.Map} map the map itself
 * @returns {google.maps.LatLngBounds} the coordinates of the surrounding bounds
 *
 * @example
 * // Given a certain point, say
 * const point = new google.maps.LatLng(32, 32);
 *
 * // We want to check if something falls within a 50 by 50 pixel square around that point
 * const bounds = boundsFromPixels(50, point, map);
 * bounds.contains(someCoord);
 **/
function boundsFromPixels(offsetPixels, centerPoint, map) {
  const mapContainer = map.getDiv();
  const mapBounds = map.getBounds();
  const mapSouthWest = mapBounds.getSouthWest();
  const mapNorthEast = mapBounds.getNorthEast();
  // Translate the offset from pixels to longitude or latitude degrees
  // using the ratio of the map's size to the total degrees displayed
  const south = mapSouthWest.lat();
  const north = mapNorthEast.lng();
  const pixelToLatitude = offsetPixels / mapContainer.offsetHeight;
  const latitudeOffset = pixelToLatitude * (north - south);

  const west = mapSouthWest.lng();
  const east = mapNorthEast.lng();
  const pixelToLongitude = offsetPixels / mapContainer.offsetWidth;
  const longitudeOffset = pixelToLongitude * (east - west);

  // Calculate the bounds in degrees - expanded from the center by half the offset
  const centerLatitude = centerPoint.lat();
  const boundsSouth = centerLatitude - latitudeOffset / 2;
  const boundsNorth = centerLatitude + latitudeOffset / 2;

  const centerLongitude = centerPoint.lng();
  const boundsWest = centerLongitude - longitudeOffset / 2;
  const boundsEast = centerLongitude + longitudeOffset / 2;

  const southWestCorner = new google.maps.LatLng(boundsSouth, boundsWest);
  const northEastCorner = new google.maps.LatLng(boundsNorth, boundsEast);

  return new google.maps.LatLngBounds(southWestCorner, northEastCorner);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.