Draggable marker in Google Maps

Map always centered on marker position

by abdulpathan

HTML

<script src="https://maps.google.com/maps/api/js"></script>
<div id="map"></div>

CSS

* {
  padding: 0;
  margin: 0;
}

#map {
  width: 100%;
  height: 100vh;
}

JavaScript

(function initMap() {
    var position = {lat: 36.720426, lng: -4.412573};
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 19,
        center: position
    });
    var marker = new google.maps.Marker({
        position: position,
        map: map,
        draggable: true
    });

    google.maps.event.addListener(marker, 'dragend', function() {
        map.panTo(marker.getPosition()); 
        console.log(marker.position.lat());
        console.log(marker.position.lng());
    });
})();