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);
        });
      }
    }
  });
}

Что ещё почитать?

← ZF Conf 2011 в Санкт-ПетербургеОператоры в JavaScript (презентация →