How to change the way a route is passed through the google maps API?

I

ivan8m82015-10-21 00:30:38

JavaScript

ivan8m8, 2015-10-21 00:30:38

Hello. I have a task: on one map (I took google maps) display different routes in different colors.
There is a code that almost copes with this:

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas {
                margin: 0;
                padding: 0;
                height: 100%;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
            var map, directionsService;

            function renderDirections(result, polylineOpts) {
                var directionsRenderer = new google.maps.DirectionsRenderer();
                directionsRenderer.setMap(map);

                if(polylineOpts) {
                    directionsRenderer.setOptions({
                        polylineOptions: polylineOpts
                    });
                }

                directionsRenderer.setDirections(result);
            }

            function requestDirections(start, end, polylineOpts) {
                directionsService.route({
                    origin: start,
                    destination: end,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                }, function(result) {
                    renderDirections(result, polylineOpts);
                });
            }

            function initialize() {

                var mapOptions = {
                    zoom: 4,
                    center: new google.maps.LatLng(39.5, -98.35),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('map-canvas'),    mapOptions);
                directionsService = new google.maps.DirectionsService();

                requestDirections('Смоленск', "Чита", { strokeColor:'#ff0000' });
                requestDirections('Bryansk', "Moscow", { strokeColor:'#0000ff' });

                setTimeout(function() {
                    map.setZoom(4);
                }, 2000);

            }

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

        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

The thing is that the routes that I need are somewhat different from those that Google lays. (Suddenly, I want to go to Ryazan via St. Petersburg) This is easily corrected online like this, using special points:

But the result of this code does not allow you to do this. There simply are not these points to slightly edit the route in order to capture the places that I need.
Can you help? It seems to me that it is not enough to include some attribute in the google maps api...

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

riot26, 2015-10-21
@riot26

draggable directions | Google Maps Javascript API