Map Bounds Demo

HTML

<div id="map"></div>
<div id="info">
  <span id="info-ne"></span>
  <span id="info-mc"></span>
  <span id="info-sw"></span>
</div>

<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>

CSS

body {
  margin: 0;
}

#map {
  height: 80vh;
}

#info {
  width: 100%;
  height: 20vh;
  display: table;
  table-layout: fixed;
  font: small monospace;
}

#info>span {
  display: table-cell;
}

#info-ne {
  vertical-align: top;
  text-align: left;
}

#info-mc {
  vertical-align: middle;
  text-align: center;
}

#info-sw {
  vertical-align: bottom;
  text-align: right;
}

JavaScript

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: new google.maps.LatLng(0, 180)
  });
  google.maps.event.addListener(map, "idle", function() {
    var bounds = map.getBounds();
    document.getElementById("info-ne").innerHTML = bounds.getNorthEast().lat().toFixed(4) + ", " + bounds.getNorthEast().lng().toFixed(4);
    document.getElementById("info-sw").innerHTML = bounds.getSouthWest().lat().toFixed(4) + ", " + bounds.getSouthWest().lng().toFixed(4);
    document.getElementById("info-mc").innerHTML = map.getCenter().lat().toFixed(4) + ", " + map.getCenter().lng().toFixed(4);
  });
}