Google Map API: Populate Marker from database using Latitude and Longitude value

nauna
 
on Jun 27, 2022 12:06 AM
177 Views

hello

i am using following solution to load google map but instead of address i have latitude and longitude value for source and destination how to show google map from latitude and longitude in below solution

pls advice

<div class="container">
    <div class="row form margintb white-bg padding15 radius">
        <div class="col-md-4 ">
            <div class="form-group">
                Current Location:       
                <input type="text" disabled id="txtSource" value="24.8284466666667" />
            </div>
            <div class="form-group">
                Destination:       
                <input type="text" disabled id="txtDestination" value="67.029715" />
            </div>
            <div class="form-group">
                <input type="button" class="btn theme-bg f-theme" value="Get Route" onclick="GetRoute()" />
                <br />
                <div id="dvDistance">
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div id="dvMap" style="width: 100%; height: 500px">
            </div>
            <div id="dvPanel" style="width: 100%;">
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">
    var source, destination;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    google.maps.event.addDomListener(window, 'load', function () {
        new google.maps.places.SearchBox(document.getElementById('txtSource'));
        new google.maps.places.SearchBox(document.getElementById('txtDestination'));
        directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
    });

    function GetRoute() {
        var mumbai = new google.maps.LatLng(18.9750, 72.8258);
        var mapOptions = {
            zoom: 7,
            center: mumbai
        };
        map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('dvPanel'));

        //*********DIRECTIONS AND ROUTE**********************//
        source = document.getElementById("txtSource").value;
        destination = document.getElementById("txtDestination").value;

        var request = {
            origin: source,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        //*********DISTANCE AND DURATION**********************//
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
            origins: [source],
            destinations: [destination],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        }, function (response, status) {
            if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                var distance = response.rows[0].elements[0].distance.text;
                var duration = response.rows[0].elements[0].duration.text;
                var dvDistance = document.getElementById("dvDistance");
                dvDistance.innerHTML = "";
                dvDistance.innerHTML += "Distance: " + distance + "<br />";
                dvDistance.innerHTML += "Duration:" + duration;

            } else {
                alert("Unable to find the distance via road.");
            }
        });
    }
</script>
<script>
    setTimeout(myURL, 2000);
    function myURL() {
        GetRoute();
    }
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jun 27, 2022 12:17 AM

Hi nauna,

From Latitude and Longitude value you need to set the source and destination and the pass the getDistanceMatrix frunction.

Reverse Geocoding: Get address from Latitude and Longitude using Google Maps Geocoding API