title: Using getPosition in google maps
body: <p>I have a red marker and a textfield where you can see the coordinates on a google map. But the coordinates are only visible when you click on the google maps card. But how to see the coordinates when you drag the marker on the google maps card? For example you drag the marker to the place New York - how to see then the coordinates of New York. The coordinates are now only visible when you click with the mouse on New York. I have the script like this:</p>
  
  <pre><code>function initMap() {    
      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: { lat: 52.001321, lng: 4.374577 },
          mapTypeControl: false
  
  
      });
  
      var coordsDiv = document.getElementById('coords');
  
      map.addListener('click', function(event) {
          coordsDiv.textContent =
              'lat: ' + event.latLng.lat().toFixed(6) + ', ' +
              'lng: ' + event.latLng.lng().toFixed(6);
  
          map.clearOverlays()
      });   
  
  
  
      var geocoder = new google.maps.Geocoder();
  
      document.getElementById('submit').addEventListener('click', function () {
          geocodeAddress(geocoder, map);
      });    
  }
  
  function toggleBounce() {
      if (marker.getAnimation() !== null) {
          marker.setAnimation(null);
      } else {
          marker.setAnimation(google.maps.Animation.BOUNCE);
      }
  
  
  }
  
  
  
  function geocodeAddress(geocoder, resultsMap) {
      //var lat = homeMarker.getPosition().lat();
      //var lng = homeMarker.getPosition().lng();
      //console(lat);
  
      var address = document.getElementById('address').value;
      geocoder.geocode({ 'address': address }, function (results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
              resultsMap.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                  map: resultsMap,
                  draggable: true,
                  animation: google.maps.Animation.DROP,
                  position: { lat: 52.068077, lng: 4.422684 },          //results[0].geometry.location,
                  title: "Drag me!"
  
                  //coordsDiv: marker.getPosition()
              });
          } else {
              alert('Geocode was not successful for the following reason: ' + status);
          }
      });
  }
  </code></pre>
  
  <p>Thank you</p>
  
  <p>I have it now like this:</p>
  
  <pre><code>function initMap() {    
      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: { lat: 52.001321, lng: 4.374577 },
          mapTypeControl: false
  
  
      });
  
      var coordsDiv = document.getElementById('coords');
  
      map.addListener('click', function(event) {
          coordsDiv.textContent =
              'lat: ' + event.latLng.lat().toFixed(6) + ', ' +
              'lng: ' + event.latLng.lng().toFixed(6);
  
          map.clearOverlays()
      });   
  
  
  
      var geocoder = new google.maps.Geocoder();
  
      document.getElementById('submit').addEventListener('click', function () {
          geocodeAddress(geocoder, map);
      });    
  }//end function initMap
  
  function toggleBounce() {
      if (marker.getAnimation() !== null) {
          marker.setAnimation(null);
      } else {
          marker.setAnimation(google.maps.Animation.BOUNCE);
      }
  
  
  }
  
  google.maps.event.addListener(marker, 'dragend', function (event) {
      var yourLat = this.getPosition().lat();
      var yourLon = this.getPosition().lng();
  });
  
  
  
  function geocodeAddress(geocoder, resultsMap) {
  
  
      var address = document.getElementById('address').value;
      geocoder.geocode({ 'address': address }, function (results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
              resultsMap.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                  map: resultsMap,
                  draggable: true,
                  animation: google.maps.Animation.DROP,
                  position: results[0].geometry.location,
                  title: "Drag me!"
  
  
                  //coordsDiv: marker.getPosition()
              });
          } else {
              alert('Geocode was not successful for the following reason: ' + status);
          }
      });
  
      var infowindow = new google.maps.InfoWindow({
          content: '&lt;p&gt;Marker Location:' + marker.getPosition() + '&lt;/p&gt;'
      });
  }
  
  google.maps.event.addDomListener(window,'load',initMap);
  </code></pre>
  
  <p>I try to click on the marker, and then you have to see a popup with the coordinates. But that doesnt work. I try it like this:</p>
  
  <pre><code>function geocodeAddress(geocoder, resultsMap) {
  
  
      var address = document.getElementById('address').value;
      geocoder.geocode({ 'address': address }, function (results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
              resultsMap.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                  map: resultsMap,
                  draggable: true,
                  animation: google.maps.Animation.DROP,
                  position: results[0].geometry.location,
                  title: "Drag me!"
  
  
                  //coordsDiv: marker.getPosition()
              });
          } else {
              alert('Geocode was not successful for the following reason: ' + status);
          }
      });
  
      var infowindow = new google.maps.InfoWindow({
          content: '&lt;p&gt;Marker Location:' + marker.getPosition() + '&lt;/p&gt;'
      });
  
      google.maps.event.addListener(marker, 'click', function () {
          infowindow.open(map, marker);
      });
  }
  </code></pre>
  
  <p>I have it now like this:</p>
  
  <pre><code>function geocodeAddress(geocoder, resultsMap) {
  
  
      var address = document.getElementById('address').value;
      geocoder.geocode({ 'address': address }, function (results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
              resultsMap.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                  map: resultsMap,
                  draggable: true,
                  animation: google.maps.Animation.DROP,
                  position: results[0].geometry.location,
                  title: "Drag me!"
  
  
                  //coordsDiv: marker.getPosition()
              });
          } else {
              alert('Geocode was not successful for the following reason: ' + status);
          }
          var infowindow = new google.maps.InfoWindow({
              content: '&lt;p&gt;Marker Location:' + marker.getPosition() + '&lt;/p&gt;'
          });
  
          google.maps.event.addListener(marker, 'click', function () {
              infowindow.open(map, marker);
  
              google.maps.event.addListener(marker, 'dragend', function (event) {
                  document.getElementById("address").value = this.getPosition().lat();
                  document.getElementById("address").value = this.getPosition().lng();
              });
          });
  
  
      });
  
  
  }
  </code></pre>
  
  <p>But if you search for a place then you will see the red marker on that place, but the coordinates are not being updated. Only if you click on the marker you will see the coordinates. </p>