Google Map Get Boundary From Map Interaction

This snippet demonstrates how to get the boundary coordinate information from a map that gets panned or zoomed by user.

by bartek

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<strong>North-East:</strong>  <span id="lat1"> </span>, <span id="lng1"></span> 
<br/>
<strong>South-West:</strong>  <span id="lat2"> </span>, <span id="lng2"></span> 
<br/>
<br/>
<strong>North-East:</strong>  <span id="lat1x"> </span>, <span id="lng1x"></span> 
<br/>
<strong>South-West:</strong>  <span id="lat2x"> </span>, <span id="lng2x"></span> 
<br/>
<div id="map"></div>

CSS

#map {
    width: 450px;
    height: 400px;
}

JavaScript

var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(52.52812794840794, 13.39259147644043),
new google.maps.LatLng(52.51768331130324, 13.41404914855957));
var map;

var mapOptions = {
    zoom: 13,
    center: bounds.getCenter(),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map($('#map')[0], mapOptions);

google.maps.event.addListener(map, 'idle', function () {
    $('#lat1').html(map.getBounds().getNorthEast().lat());
    $('#lng1').html(map.getBounds().getNorthEast().lng());
    $('#lat2').html(map.getBounds().getSouthWest().lat());
    $('#lng2').html(map.getBounds().getSouthWest().lng());
    
    console.log(map.getBounds().getNorthEast())
    console.log(map.getBounds().getSouthWest())
    console.log(map.getBounds())
});

var MERCATOR_RANGE = 256;

function bound(value, opt_min, opt_max) {
    if (opt_min != null) value = Math.max(value, opt_min);
    if (opt_max != null) value = Math.min(value, opt_max);
    return value;
}

function degreesToRadians(deg) {
    return deg * (Math.PI / 180);
}

function radiansToDegrees(rad) {
    return rad / (Math.PI / 180);
}

function MercatorProjection() {
    this.pixelOrigin_ = new google.maps.Point(MERCATOR_RANGE / 2, MERCATOR_RANGE / 2);
    this.pixelsPerLonDegree_ = MERCATOR_RANGE / 360;
    this.pixelsPerLonRadian_ = MERCATOR_RANGE / (2 * Math.PI);
};

MercatorProjection.prototype.fromLatLngToPoint = function (latLng, opt_point) {
    var me = this;

    var point = opt_point || new google.maps.Point(0, 0);

    var origin = me.pixelOrigin_;
    point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;
    // NOTE(appleton): Truncating to 0.9999 effectively limits latitude to
    // 89.189.  This is about a third of a tile past the edge of the world tile.
    var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999, 0.9999);
    point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) * -me.pixelsPerLonRadian_;
    return...