Map with Marker

by dimskraft

HTML

<div id="title">Hello</div>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

#map {
  height: 400px;
  width: 100%;
 }

JavaScript

function initMap() {
  var uluru = {lat: -33.86549, lng: 151.20377};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: uluru
  });
  map.addListener('bounds_changed', function() {
    var lat = map.getCenter().lat();
    var lng = map.getCenter().lng();
    var top = map.getBounds().getNorthEast().lat();
    var bot = map.getBounds().getSouthWest().lat();
    var dif = top - bot;
    var meters = dif * 111195;
  	$('#title').html('lat = ' + lat + ', lng = ' + lng + ', delta = ' + dif + ', meters = ' + meters);
  })
 
}