JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<body>
    <section>
        <div id='map_canvas'></div>
        <div id="current">Nothing yet...</div>
    </section>
</body>

CSS

#map_canvas {
    width: 980px;
    height: 500px;
}
#current {
    padding-top: 25px;
}

JavaScript

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 15,
    center: new google.maps.LatLng(26.906, 75.772),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(26.906, 75.772),
    draggable: true
});

google.maps.event.addListener(myMarker, 'dragend', function (evt) {
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
map.addListener('zoom_changed', function() {
  alert(map.getZoom());  
  });

map.setCenter(myMarker.position);
myMarker.setMap(map);