CODEWITHSUNDEEP
javascriptgoogle-mapsdrag
jason
jason

Reputation: 7164

Position of a dragged latlon Google Map JavaScript

Below code shows the path between two latlongs :

function mapLocation() {
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true
});
    var city = new google.maps.LatLng(41.015137, 28.979530);
    var mapOptions = {
      zoom: 7,
      center: city  
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    calcRoute();
  }

  function calcRoute() {
    var start = new google.maps.LatLng(41.01524, 28.975994);
    var end = new google.maps.LatLng(41.013232, 28.978676);
    
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING

    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
      alert(response.routes[0].legs[0].distance.value + " meters");
        directionsDisplay.setDirections(response);
        directionsDisplay.setMap(map);
        
        //alert(request.distance);
      } else {
        alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
      }
      
    });
    
    
    

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

The code always works, I can see the path all the time when I drag those two latlongs. But I want to get the position of latlongs after dragging. How can I do that? I tried to put alerts in various places in the codes but none of them worked. Can you help me with that?

function mapLocation() {
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true
});
    var city = new google.maps.LatLng(41.015137, 28.979530);
    var mapOptions = {
      zoom: 7,
      center: city  
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    calcRoute();
  }

  function calcRoute() {
    var start = new google.maps.LatLng(41.01524, 28.975994);
    var end = new google.maps.LatLng(41.013232, 28.978676);
    
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING

    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
      //alert(response.routes[0].legs[0].distance.value + " meters");
        directionsDisplay.setDirections(response);
        directionsDisplay.setMap(map);
        
        //alert(request.distance);
      } else {
        alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
      }
      
    });
    
    
    

  }
  
  
  google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();
html,
body,
#map-canvas {
  height: 90%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<body>
<!-- <input type="button" id="routebtn" value="route" /> -->
<div id="map-canvas"></div>

Upvotes: 0

Views: 51

Answers (1)

geocodezip
geocodezip

Reputation: 161334

The markers locations are in the directions property of the directionsDisplay. To retrieve them when the route changes, add an event listener to the directionsDisplay for the directions_changed event, parse the directions object returned for the start and end locations of the route. For your route, with only a single leg, they will be:

directionsDisplay.getDirections().routes[0].legs[0].start_location;
directionsDisplay.getDirections().routes[0].legs[0].end_location;

To put them in a <input> field on the page:

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  document.getElementById("startlatlng").value = directionsDisplay.getDirections().routes[0].legs[0].start_location.toUrlValue(6);
  document.getElementById("endlatlng").value = directionsDisplay.getDirections().routes[0].legs[0].end_location.toUrlValue(6);
});

proof of concept fiddle

code snippet:

function mapLocation() {
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer({
      draggable: true
    });
    var city = new google.maps.LatLng(41.015137, 28.979530);
    var mapOptions = {
      zoom: 7,
      center: city
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
      document.getElementById("startlatlng").value = directionsDisplay.getDirections().routes[0].legs[0].start_location.toUrlValue(6);
      document.getElementById("endlatlng").value = directionsDisplay.getDirections().routes[0].legs[0].end_location.toUrlValue(6);
    });
    calcRoute();
  }

  function calcRoute() {
    var start = new google.maps.LatLng(41.01524, 28.975994);
    var end = new google.maps.LatLng(41.013232, 28.978676);
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        directionsDisplay.setMap(map);
      } else {
        alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();
html,
body,
#map-canvas {
  height: 90%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<body>
  <input type="text" id="startlatlng" />
  <input type="text" id="endlatlng" />
  <!-- <input type="button" id="routebtn" value="route" /> -->
  <div id="map-canvas"></div>

Upvotes: 1

Related Questions