Необходимо выводить сразу 2 маршрута на google map api.
Пока к сожалению не удалось это сделать.
<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>