Ways to retrieve the latitude and longitude coordinates between the starting point and the destination

Question

Ways to retrieve the latitude and longitude coordinates between the starting point and the destination

I need to retrieve all the latitude and longitude coordinates from Google Maps.

For instance: If I input the latitudes and longitudes of a source and destination, and a path is drawn on the map like below:

Now, I want to obtain all the latitude and longitude points between point A (source) and B (destination), and store them in a database.

If my car deviates from this path, I want it to trigger an action like sending me an email.

I am working on development using ASP.NET C#.

How can I retrieve all the latitude and longitude values?

I am currently utilizing the script below:

  <script>
        function initialize() {
            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 8,
                center: new google.maps.LatLng(22.304634, 73.161070),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }),
       directions = new google.maps.DirectionsService(),
       displayer = new google.maps.DirectionsRenderer({
            draggable: true
        });

            displayer.setMap(map);
            directions.route({
                origin: new google.maps.LatLng(22.304634, 73.161070),
                destination: new google.maps.LatLng(23.022242, 72.548844),
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function (result) {
                displayer.setDirections(result);
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        google.maps.event.addListener(displayer, 'directions_changed', some_method);
    </script>

javascript c#asp.net google-maps

Answer 1

Answer №1

To successfully send the data stored in the overview_path property of the google.maps.DirectionsRoute object to the server and save it in the database, you need to iterate over this property first.

Here is an example demonstrating how to loop through the overview_path:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body, #map-canvas { height: 100%; min-height: 600px; min-width: 700px; margin: 0px; padding: 0px }
      #map-canvas { height: 50%; }
      #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
    <div id="panel">
      <label>Origin
          <input id="origin" type="text" value="">
      </label>
      <label>Destination
          <input id="destination" type="text" value="">
      </label>
      <input type="button" value="GetDirections" onclick="calcRoute()">
    </div>
    <div id="map-canvas"></div>
    <div id="vertex-container">
        <label>Points</label>
        <ul id="vertex">
        </ul>
    </div>
    <script type="text/javascript">
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();

            var mapOptions = {
                zoom: 7,
                center: new google.maps.LatLng(48.85727000, 2.35238)
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            directionsDisplay.setMap(map);
        }

        function calcRoute() {
            var start = document.getElementById('origin').value;
            var end = document.getElementById('destination').value;
            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);
                    if (response.routes && response.routes.length > 0) {
                        var routes = response.routes;
                        for (var j = 0; j < routes.length; j++) {
                            var points = routes[j].overview_path;
                            var ul = document.getElementById("vertex");
                            for (var i = 0; i < points.length; i++) {
                                var li = document.createElement('li');
                                li.innerHTML = getLiText(points[i]);
                                ul.appendChild(li);
                            }
                        }
                    }
                }
            });
        }
        function getLiText(point) {
            var lat = point.lat(),
                lng = point.lng();
            return "lat: " + lat + " lng: " + lng;
        }

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

Answer 2

To successfully send the data stored in the overview_path property of the google.maps.DirectionsRoute object to the server and save it in the database, you need to iterate over this property first.

Here is an example demonstrating how to loop through the overview_path:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body, #map-canvas { height: 100%; min-height: 600px; min-width: 700px; margin: 0px; padding: 0px }
      #map-canvas { height: 50%; }
      #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
    <div id="panel">
      <label>Origin
          <input id="origin" type="text" value="">
      </label>
      <label>Destination
          <input id="destination" type="text" value="">
      </label>
      <input type="button" value="GetDirections" onclick="calcRoute()">
    </div>
    <div id="map-canvas"></div>
    <div id="vertex-container">
        <label>Points</label>
        <ul id="vertex">
        </ul>
    </div>
    <script type="text/javascript">
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();

            var mapOptions = {
                zoom: 7,
                center: new google.maps.LatLng(48.85727000, 2.35238)
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            directionsDisplay.setMap(map);
        }

        function calcRoute() {
            var start = document.getElementById('origin').value;
            var end = document.getElementById('destination').value;
            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);
                    if (response.routes && response.routes.length > 0) {
                        var routes = response.routes;
                        for (var j = 0; j < routes.length; j++) {
                            var points = routes[j].overview_path;
                            var ul = document.getElementById("vertex");
                            for (var i = 0; i < points.length; i++) {
                                var li = document.createElement('li');
                                li.innerHTML = getLiText(points[i]);
                                ul.appendChild(li);
                            }
                        }
                    }
                }
            });
        }
        function getLiText(point) {
            var lat = point.lat(),
                lng = point.lng();
            return "lat: " + lat + " lng: " + lng;
        }

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

Ways to retrieve the latitude and longitude coordinates between the starting point and the destination

Answer №1

Similar questions

Obtain the result of two "Synchronous" nested queries using Express and Mongoose

`There is an issue with updating the canvas in a Windows Form application`

Updating the appearance of tabs in React Native Navigation dynamically during runtime

Impressive javascript - extract file from formData and forward it

Tips for implementing a client-side event when an asp:menu item is clicked

Using the POST method in Node.js is not functioning properly on the Replit server when using express

Single-page application powered by WordPress and universal JavaScript

Repeating items must be unique; duplicates are not permitted on ng-repeat

Error: Unable to execute $(...).stellar since it is not a recognized function

XPathSelectorError: The provided xpath expression is invalid and unable to locate the specified element

Reacts Router Link does not refresh page content

Is there any other factor aside from the lack of a CSRF token in an AJAX request with Django that could lead to a 403 error?

Exploring the concept of inheritance and nested views within AngularJS

What is the best way to pass the double-clicked row as a parameter to a function, when the row is dynamically created in the code?

ways to validate the calling function in jquery

Code snippet for fetching JavaScript file using Angular's caching mechanism

When continuously looped, the Selenium MoveToElement() action unexpectedly scrolls to the top

Enhance your webpage with dynamic styling using third-party CSS animation

How can AngularJS service methods be assigned to controller $scope for use in an ng-repeat loop in the view?

Reply in Loopback on remote method beforeRemote hook is to be sent