How to convert Position and Zoom Level to LatLngBounds with Google Maps Javascript?

Question

I start to implement a web solution to display a GroundOverlay on a google maps. With IOS and Android, it's possible to add a GroundOverlay, with the center, image and zoom level but it's not possible in Javascript.

• Javascript : https://developers.google.com/maps/documentation/javascript/reference/image-overlay#GroundOverlay.constructor
• IOS: https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_ground_overlay#a894dab44f5fb3f7e5c45431f3e7ab513

So what is the mathematical solution to convert a position (Lat, Lng) to a bound ((Lat,Lng),(Lat,Lng))?

Here is what I have:

• Center Position (Latitude, Longitude)
• ImageUrl
• ZoomLevel
• Google Map

Answer 1

I found a solution mostly inspired from This answer.

function getImageDimensions(imageUrl: string): Observable<{ width: number, height: number }> {
  return new Observable(observer => {
    let image = new Image();
    image.onload = function (event) {
      let loadedImage: any = event.currentTarget;
      observer.next({
        width: loadedImage.width,
        height: loadedImage.height
      });
      observer.complete();
    }
    image.src = imageUrl;
  });
} 



getImageDimensions(imageUrl: string, zoomLevel:number, center: google.maps.LatLng, map: google.maps.Map).subscribe(dimensions => {
  let projection = map.getProjection();
  let zoom = Math.pow(2, zoomLevel) * 2;
  let width = dimensions.width / zoom;
  let height = dimensions.height / zoom;
  let containerPixel = projection.fromLatLngToPoint(center);

  var result = new google.maps.LatLngBounds(
    projection.fromPointToLatLng(
      new google.maps.Point(containerPixel.x - width, containerPixel.y + height)
    ),
    projection.fromPointToLatLng(
      new google.maps.Point(containerPixel.x + width, containerPixel.y - height)
    )
  );
  console.log(result);
});