Search code examples
javascriptgoogle-mapsgoogle-maps-markersgeocoding

Google maps dragstart and dragend with confirmation

If I want to move the marker and I click "YES" in confirmation alert the marker will move to dragend position, but I have problem when I click "NO" in confirmation alert. The marker should move to dragstart position but in current code the marker stay in dragend position not in dragstart position.

<!DOCTYPE html>
<html>
<body>

<p><span id="start"></span></p>
<p><span id="end"></span></p>
<div id="map" style="width:100%;height:500px"></div>

<script>
function initMap() {
     var theLat      = 51.508742;
     var theLng      = -0.120850;
     var displayMap  = document.getElementById("map");
     var myLatlng    = new google.maps.LatLng(theLat, theLng);
     var myOptions   = {
          zoom: 5,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
     }

     var map         = new google.maps.Map(displayMap, myOptions);
     var marker      = new google.maps.Marker({
          position: myLatlng,
          map: map,
          draggable: true
     });

     google.maps.event.addListener(marker, 'dragend', function() {
          if (confirm("Are You Sure You Want To Move this marker?")) {
               var positionStartLatNew = this.position.lat();
               var positionStartLngNew = this.position.lng();
               document.getElementById('end').innerHTML = "Lat end : " + positionStartLatNew + ", " + "Lng end : " + positionStartLngNew;
          } else {
               google.maps.event.addListener(marker, 'dragstart', function() {
               var positionStartLat = this.position.lat();
               var positionStartLng = this.position.lng();
               document.getElementById('start').innerHTML = "Lat start : " + positionStartLat + ", " + "Lng start : " + positionStartLng;
               });
          }
     });
}
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuDtGMwgHfy9Nb07ARmHlsT-Zen228uK4&callback=initMap"></script>
</body>
</html>
Solution

  • Save the position in an accessible scope on dragstart. Use that position to revert the marker when the confirm dialog is cancelled:

     var positionStart, positionStartNew;
 google.maps.event.addListener(marker, 'dragstart', function() {
           positionStart = this.position;
           document.getElementById('start').innerHTML = "start position: " + positionStart.toUrlValue(6);
 });
 google.maps.event.addListener(marker, 'dragend', function() {
   if (confirm("Are You Sure You Want To Move this marker?")) {
     positionStartNew = this.position;
     document.getElementById('end').innerHTML = "end position: " + positionStartNew.toUrlValue(6);
   } else {
     marker.setPosition(positionStart);
   }
 });

    proof of concept fiddle

    screenshot of map after cancelling the dialog box

    code snippet:

    function initMap() {
  var theLat = 51.508742;
  var theLng = -0.120850;
  var displayMap = document.getElementById("map");
  var myLatlng = new google.maps.LatLng(theLat, theLng);
  var myOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(displayMap, myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true
  });
  var positionStart, positionStartNew;
  google.maps.event.addListener(marker, 'dragstart', function() {
    positionStart = this.position;
    document.getElementById('start').innerHTML = "start position: " + positionStart.toUrlValue(6);
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    if (confirm("Are You Sure You Want To Move this marker?")) {
      positionStartNew = this.position;
      document.getElementById('end').innerHTML = "end position: " + positionStartNew.toUrlValue(6);
    } else {
      marker.setPosition(positionStart);
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);
    html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: white;
}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="start"></div>
<div id="end"></div>
<div id="map"></div>