Javascript: Get Coords From Both Clicking And Dragging Map Marker

I have the below script in which a google map marker is placed when the map is clicked. It can then be dragged around for further precision. I would like to obtain the coordinates

Solution 1:

You have a typo in your code:

markersArray.push(marker);

map.addListener(marker, 'dragend', function (event) {
var position = event.latLng;
console.log(position);
});

should be:

markersArray.push(marker);

google.maps.event.addListener(marker, 'dragend', function (event) {
var position = event.latLng;
console.log(position);
});

proof of concept fiddle

code snippet:

var geocoder;
var map;
var markersArray = [];

functionplaceMarkerAndPanTo(latLng, map) {
  var position = latLng;
  console.log(position);
  while (markersArray.length) {
    markersArray.pop().setMap(null);
  }
  var marker = new google.maps.Marker({
    draggable: true,
    position: latLng,
    map: map,
    title: "Select Your Location!"
  });
  map.panTo(latLng);

  markersArray.push(marker);

  google.maps.event.addListener(marker, 'dragend', function(event) {
    var position = event.latLng;
    console.log(position);
  });
}

functioninitialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  map.addListener('click', function(e) {
    placeMarkerAndPanTo(e.latLng, map);
  });

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map_canvas"style="border: 2px solid #3872ac;"></div>

Solution 2:

You could try moving var marker outside of the function and just use

marker = new google.maps.Marker({
    draggable: true,
    position: latLng,
    map: map,
    title: "Select Your Location!"
});

and then move the listener outside of the function.