CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Wikki
Wikki

Reputation: 589

Google Maps v3 Direction Renderer redraw response

Can I save the response from Google Maps API Direction Services in db as JSON and reuse that to draw on the map using google.maps.DirectionsRenderer();

I am already saving it in DB, but when I like to redraw on map using new google.maps.DirectionsRenderer(); it does not show line on Map. However it does display the direction panel based on my loaded JSON from db.

Below is code snippet:

            $.ajax({
                type: "GET",
                url: 'controller.php',
                data: {action: 'routedata', id: id},
                dataType: 'json',
                success: function(data){
                    if(data && data.routes && data.routes.length > 0){
                        var thisRouteDirRender = new google.maps.DirectionsRenderer();
                        thisRouteDirRender.setMap(map);
                        thisRouteDirRender.setPanel(document.getElementById('directions-panel'));
                        thisRouteDirRender.setDirections(data);
                    }
                }
            });

Upvotes: 2

Views: 1395

Answers (1)

joni jones
joni jones

Reputation: 2995

I'm think you can try somethink like this:

$.ajax({
    type: "GET",
    url: 'controller.php',
    data: {action: 'routedata', id: id},
    dataType: 'json',
    success: function(data){
        if(data && data.routes && data.routes.length > 0){
            var thisRouteDirRender = new google.maps.DirectionsRenderer();
            var directionsService = new google.maps.DirectionsService();
            thisRouteDirRender.setMap(map);
            thisRouteDirRender.setPanel(document.getElementById('directions-panel'));
            var request = {
                origin: data.routes[0].LatLng ,
                destination: data.routes[data.routes.length - 1].LatLng,
                travelMode: google.maps.TravelMode.WALKING
            };
            directionsService.route(request, function(result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    thisRouteDirRender.setDirections(result);
                }
            });
        }
    }
});

You need use google.maps.DirectionsService to build route. Also you can specify waypoints[] from data. All additional parameters for request method you can see in google docs

Upvotes: 1

Related Questions