How to make 2 routes on google map api?

D
David Martin2015-07-08 04:46:38
JavaScript
David Martin, 2015-07-08 04:46:38
It is necessary to display 2 routes at once on the google map api.
So far, unfortunately, this has not been possible.
<body>
<div id="googlemaps"></div>
<div id="contactform">
<b>От станции метро «Охотный ряд»: </b> </br>
Выйти из метро на улицу Моховая, пройти по ней до первого поворота направо на улицу Большая Никитская, По Большой Никитской подняться наверх (примерно 5 минут) до дома номер 22/2, который будет по правую руку, вам нужен второй подъезд, у нас отдельная кнопка домофона. Подняться на 4-й этаж, квартира 31.

</br></br>
<b>ООт станции метро Арбатская:</b> </br>
Выйти из метро на Никитский бульвар, пройти по нему прямо до первого поворота направо на улицу Большая Никитская, перейти на противоположную сторону Большой Никитской и идти пока по левую руку от Вас не окажется дом 22/2, это наш, вам нужен второй подъезд, у нас отдельная кнопка домофона. Подняться на 4-й этаж, квартира 31.</div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAHOVCY9pZd6fLcJ2rg81QiFfAlomFKRxo&sensor=false"></script>
<script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);
    var center = [55.752161, 37.601518];
    var hostel = [55.7572633, 37.6025365];
    var metro = [55.752161, 37.601518];
    function init() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 17,

            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(center[0], center[1]),

            // How you would like to style the map. 
            // This is where you would paste any style found on Snazzy Maps.
            styles: [{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"poi","elementType":"labels","stylers":[{"gamma":"0.70"}]},{"featureType":"road","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"lightness":"0"}]},{"featureType":"transit","elementType":"all","stylers":[{"hue":"#ff0e00"},{"gamma":"1.50"},{"lightness":"10"}]},{"featureType":"transit.line","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"transit.station.airport","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"transit.station.bus","elementType":"all","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"water","elementType":"all","stylers":[{"saturation":"-100"},{"lightness":"30"}]}]
        };

        // Get the HTML DOM element that will contain your map 
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('googlemaps');

        // Create the Google Map using our element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);
        
        var image = 'http://clever-hostel.ru/wp-content/themes/zerif-pro/images/pinMap.png';        var myLatLng = new google.maps.LatLng(hostel[0], hostel[1]);
        var beachMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: 'Hostel'
        });
                            
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setOptions( { suppressMarkers: true } );
        directionsService = new google.maps.DirectionsService();
        
        var request = {
            origin: new google.maps.LatLng(metro[0], metro[1]), //òî÷êà ñòàðòà
            destination: new google.maps.LatLng(hostel[0], hostel[1]), //òî÷êà ôèíèøà
            provideRouteAlternatives:true,
            travelMode: google.maps.DirectionsTravelMode.WALKING //ðåæèì ïðîêëàäêè ìàðøðóòà
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        directionsDisplay.setMap(map);

        
    }
</script>

</body>
Reply
Answer the question
In order to leave comments, you need to log in
1 answer(s)
V
Vanya Semeschuk, 2015-07-08
@vanya619
Link