How to get lat, long after map dragend

Question

<script>
  function initialize() {
    var crosshairShape = {coords:[0,0,0,0],type:'rect'};

    var mapCanvas = document.getElementById('map');
    var mapOptions = {
      center: new google.maps.LatLng(23.634501, -102.552784),
      zoom: 5,
      scrollwheel: false,
      panControl: false,
      zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);

    var marker = new google.maps.Marker({
        map: map,
    });

    marker.bindTo('position', map, 'center');
    //marker.bindTo('position', map, 'center');

    map.addListener('dragend', function() {
        var Newlat = position.coords.latitude;
       console.log(Newlat);
      });

  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

This is the code I'm using to make a draggable map with a marker in the origin. I can't seem to get the latitude and longitude of the position where the marker was left. Anybody can help me?

`position.coords.latitude` - what is `position`? where is it defined? — Jaromanda X, Jan 27 '17 at 02:32

geocodezip · Accepted Answer · 2017-01-27T10:54:30.103

The map dragend event callback function doesn't have any arguments. Inside the callback function, get the map center (which is what you want):

map.addListener('dragend', function() {
  var Newlat = map.getCenter().lat();
  console.log(Newlat);
});

proof of concept fiddle

code snippet:

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(23.634501, -102.552784),
    zoom: 5,
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);

  var marker = new google.maps.Marker({
    map: map,
  });

  marker.bindTo('position', map, 'center');

  map.addListener('dragend', function() {
    var Newlat = map.getCenter().lat();
    console.log(Newlat);
  });

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

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

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

How to get lat, long after map dragend

1 Answers1