Google Maps + Geolocation + Маршруты = <3
Недавно мы добавили в раздел «Контакты» к нашей карте возможность прокладывать маршрут от того места, где сейчас находится пользователь, к нам в офис. Я бы хотел немного подробнее рассказать как это делается.
Думаю с картами Google Maps уже все знакомы, и как их подключать объяснять не буду. Для инициализации всего этого дела нам понадобится пару объектов:
var map = new google.maps.Map(...);
var service = new google.maps.DirectionsService();
var direction = new google.maps.DirectionsRenderer({map: map});
var baloon = new google.maps.InfoWindow();
Следующим шагом будет определение работает ли Geolocation API в браузере, и если работает, получаем позиции текущего местоположения:
if (navigator.geolocation) {
// #showroute это id кнопки/ссылки на сайте, нажимая которую мы должны проложить маршрут
var showroute = document.getElementById('showroute');
showroute.addEventListener('click', function(event) {
event.preventDefaults();
// пока строится маршрут не разрешаем нажимать на кнопку/ссылку снова
if (!showroute.classList.contains('disabled')) {
showroute.classList.add('disabled');
navigator.geolocation.getCurrentPosition(function(position) {
// отправляем текущую позицию в функцию для прокладывания маршрута
showRouteService(position);
});
}
}, false);
}
Теперь остается заключительная часть — получение маршрута и нанесение маркеров по всему пути на карту, все это описываем в функции showRouteService:
function showRouteService(position) {
var request = {
origin: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
destination: new google.maps.LatLng(/* координаты офиса */),
travelMode: google.maps.DirectionsTravelMode.WALKING // если в вашем городе работают автомобильные маршруты, можно использовать их
};
// Отправляем запрос на прокладку маршрута
service.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
direction.setDirections(response);
// получаем первый вариант маршрута
var route = response.routes[0].legs[0];
// проставляем маркеры по всему маршруту с описанием изменения маршрута
for (var i=0,length=route.steps.length; i<length; i++) {
var marker = new google.maps.Marker({
position: route.steps[i].start_point,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
balloon.setContent(route.steps[i].instructions);
balloon.open(map, marker);
});
}
}
});
}