Автор

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

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


В данном уроке мы рассмотрим как можно проложить маршрут на карте 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');
});

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеJS

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

Здесь можно бесплатно воспользоваться готовыми примерами блочной css верстки слоями. Каждый шаблон ниже содержит готовую резиновую и не резиновую верстку в две или три колонки с различным расположением. Во всех верстках css footer прижат к низу. Каждая div, блочная, дивная верстка валидна и проверена на кроссбраузерность.


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

Тенденции в области инфографического дизайна 2018, безусловно, будут следовать правилам графического дизайна 2018 года. Однако инфографика имеет эту специфическую и обязательную функцию, которую вы должны иметь в виду при проектировании: информации.


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

Важной частью работы любого сайта является скорость его загрузки у пользователя в браузере. Тут правило одно - чем быстрее, тем лучше. Оптимизировать проект не всегда возможно, и тут к нам на выручку приходят некоторые хитрости. Сегодня мы поговорим о «ленивой загрузке» картинок на сайте, и использовать будем jQuery плагин Lazy Load.


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

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close