Thiết kế website giá rẻ

Question

I have managed to get the directions API working with a set of physical street addresses. I now would like to make it work with latitude and longitude. I have been at this for hours, but am unable to get it right. If anyone can see the mistake in my code, I would greatly appreciate it.

I now get “zero results” for each item.

Below is the modified code. The all items are here included in the <body> because I am putting it as a content page in a CMS.

Any help would be appreciated.

WORKING WITH PHYSICAL ADDRESSES:

<script src="https://maps.googleapis.com/maps/api/js?loading=async&key=xxx"></script>
<script>
    $(document).ready(function(){
        initialize();
    });
</script>
<div id="delay"></div>
<div id="map" style="height: 600px !important;"></div>
<div id="messages"></div>
<script>
    var addresses = [
        ["2191, Bryanston, South Africa", "2196, Illovo, South Africa"],
        ["2191, Bryanston, South Africa", "2196, Illovo, South Africa"],
        ["1687, Noordwyk, South Africa", "2196, Illovo, South Africa"]
    ];

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var pta = new google.maps.LatLng(27.982895, -26.041802);
        var mapOptions = {
            zoom: 12,
            center: pta
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        directionsDisplay.setMap(map);
        bounds = new google.maps.LatLngBounds();
    }

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var bounds;
    var delay = 250;
    var nextAddress = 0;

    function calcRoute(start, end, next) {
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request,
            function (result, status) {
                if (status == 'OK') {
                    directionsDisplay = new google.maps.DirectionsRenderer({
                        suppressBicyclingLayer: true,
                        suppressMarkers: true,
                        preserveViewport: true // don't zoom to fit the route
                    });
                    directionsDisplay.setMap(map);
                    directionsDisplay.setDirections(result);
                    bounds.union(result.routes[0].bounds);
                    map.fitBounds(bounds);
                } else {
                    console.log("status=" + status + " (start=" + start + ", end=" + end + ")");
                    if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                        nextAddress--;
                        delay += 100;
                        document.getElementById('delay').innerHTML = "delay between requests=" + delay;
                    } else {
                        var reason = "Code " + status;
                        var msg = 'start="' + start + ' end="' + end + '"" error=' + reason + '(delay=' + delay + 'ms)<br>';
                        document.getElementById("messages").innerHTML += msg;
                    }
                }
                next();
            });
    }

    function theNext() {
        if (nextAddress < addresses.length) {
            setTimeout('calcRoute("' + addresses[nextAddress][0] + '","' + addresses[nextAddress][1] + '",theNext)', delay);
            nextAddress++;
        } else {
            map.fitBounds(bounds);
        }
    }

    theNext();
</script>

NOT WORKING WITH LATLONG:

<script src="https://maps.googleapis.com/maps/api/js?loading=async&key=xxx"></script>
<script>
    $(document).ready(function(){
        initialize();
    });
</script>
<div id="delay"></div>
<div id="map" style="height: 600px !important;"></div>
<div id="messages"></div>
<script>
    var addresses = [
        ["28.030307,-28.030307", "26.030307,-26.030307"],
        ["26.030307,-26.030307", "26.030307,-26.030307"],
        ["26.030307,-26.030307", "26.030307,-26.030307"]
    ];

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var pta = new google.maps.LatLng(27.982895, -26.041802);
        var mapOptions = {
            zoom: 12,
            center: pta
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        directionsDisplay.setMap(map);
        bounds = new google.maps.LatLngBounds();
    }

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var bounds;
    var delay = 250;
    var nextAddress = 0;

    function calcRoute(start, end, next) {
        var s = start.split(',');
        var e = end.split(',');
        var org = new google.maps.LatLng(parseFloat(s[0]), parseFloat(s[1]));
        var dst = new google.maps.LatLng(parseFloat(e[0]), parseFloat(e[1]));
        var request = {
            origin: org,
            destination: dst,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request,
            function (result, status) {
                if (status == 'OK') {
                    directionsDisplay = new google.maps.DirectionsRenderer({
                        suppressBicyclingLayer: true,
                        suppressMarkers: true,
                        preserveViewport: true // don't zoom to fit the route
                    });
                    directionsDisplay.setMap(map);
                    directionsDisplay.setDirections(result);
                    bounds.union(result.routes[0].bounds);
                    map.fitBounds(bounds);
                } else {
                    console.log("status=" + status + " (start=" + start + ", end=" + end + ")");
                    if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                        nextAddress--;
                        delay += 100;
                        document.getElementById('delay').innerHTML = "delay between requests=" + delay;
                    } else {
                        var reason = "Code " + status;
                        var msg = 'start="' + start + ' end="' + end + '"" error=' + reason + '(delay=' + delay + 'ms)<br>';
                        document.getElementById("messages").innerHTML += msg;
                    }
                }
                next();
            });
    }

    function theNext() {
        if (nextAddress < addresses.length) {
            setTimeout('calcRoute("' + addresses[nextAddress][0] + '","' + addresses[nextAddress][1] + '",theNext)', delay);
            nextAddress++;
        } else {
            map.fitBounds(bounds);
        }
    }

    theNext();
</script>

Thiết kế website giá rẻ

Danh mục

Google Maps to plot routes on map with lat and long