Как проложить маршрут на карте Google

JS 06.06.2014

В данном уроке мы рассмотрим как можно проложить маршрут на карте Google? при этом у Вас будет самостоятельно указать пункты назначения в специальном окне навигации, кроме этого после прокладывания пути Вы увидите расстояние в километрах. Для реализации такой манипуляции с картами нам понадобится небольшой кусок стилей, в котором мы укажем параметры для блока ввода информации и линия, которая будет обозначать маршрут. За расчет маршрута у нас будет отвечать функции js, с помощью которой также мы и узнаем дистанцию.

ДЕМО

ИСХОДНИКИ

Такая карта станет полезная для информативных сайтов, работающие с картами, Вы сможете наглядно продемонстрировать желаемый маршрут в полноэкранном режиме. И так, давайте приступим.

Шаг 1. HTML

Разметка у нас будет проста, нам необходимо указать разметку для панели навигации и вызов самой карты, реализуем мы это с помощью следующих команд:

<div id="controls">
 <label><span><b>От куда:</b></span> <input type="text" name="from"></label>
 <label><span><b>Куда:</b></span> <input type="text" name="to"></label>
 <p></p>
</div>
<div id="map"></map>

Кроме этого нам необходимо подключить пару скриптов с репозитория Google.

Шаг 2. CSS

Теперь нам необходимо стилизовать наши карты, задать стиль для маршрута, у нас будет красная, полупрозрачная линия, и оформление панели навигации:

#map {
 width: 100%;
 height: 100%;
}
#controls {
position: absolute;
 top: 1.5em;
 right: 1.5em;
 z-index: 10;
 background: #fff;
 padding: 1em 2em;
 opacity: .8;
 border-top: solid .4em #444;
 border-bottom: solid .4em #444;
 label {
 display: block;
 margin: 1em 0;
 span {
 display: inline-block;
 min-width: 3.5em;
 }
 input {
 font-family: 'Montserrat';
 font-size: 12pt;
 padding-bottom: .2em;
 width: 10em;
 border: none;
 border-bottom: solid 1px #999;
 color: #000;
 outline: none;
 webkit-appearance: none;
 }
 }
 p {
 text-align: right;
 font-size: 80%;
 margin: 1em 0 .5em 0;
 }
 p.error {
 color: #b00;
 }
}

Кроме этого мы указали общие параметры наложения и позиционирование блоков на странице, добавили несколько полос для блока навигации для большей отзывчивости интерфейса.

Шаг 3. JS

Теперь нам необходимо создать функцию, которая будет рассчитывать и прокладывать маршрут между двумя точками. Кроме это у Вас есть возможность указать в каких единицах измерения будет расстояние. Также у нас установлены два фиксированных города для демонстрации.

$(document).ready(function(){
 function initMap() {
 var latlng = new google.maps.LatLng(51.5, 0);
 var mapOptions = {
 center: latlng,
 zoom: 8,
 mapTypeControl: false,
 streetViewControl: false,
 styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
 };
 map = new google.maps.Map(document.getElementById('map'), mapOptions);
 }
function drivingRoute(from, to) {
 var request = {
 origin: from,
 destination: to,
 travelMode: google.maps.DirectionsTravelMode.DRIVING,
 unitSystem: google.maps.UnitSystem.METRIC
 };
 $('#controls p').removeClass('error');
 $('#controls p').text('loading');
 if(typeof(drivingLine) !== 'undefined') drivingLine.setMap(null);
 directionsService.route(request, function(response, status){
 if(status == google.maps.DirectionsStatus.OK){
var totalKM = (response.routes[0].legs[0].distance.value / 1000);
 var miles = Math.round(totalKM * 0.621371192 * 10) / 10;
 var distanceText = miles+' miles';
 $('#controls p').text(distanceText);
drivingLine = new google.maps.Polyline({
 path: response.routes[0].overview_path,
 strokeColor: "#b00",
 strokeOpacity: .75,
 strokeWeight: 5
 });
 drivingLine.setMap(map);
 map.fitBounds(response.routes[0].bounds);
 }
 else {
 $('#controls p').addClass('error');
 $('#controls p').text('cannot load route');
 }
 });
}
$('input').blur(function(){
 drivingRoute(
 $('input[name=from]').val(),
 $('input[name=to]').val()
 );
 });
 var map;
 var drivingLine;
 var directionsService = new google.maps.DirectionsService();
 initMap();
 $('input[name=from]').val('Witney');
 $('input[name=to]').val('Cardiff');
 $('input[name=from]').trigger('blur');
});