Dział Kontakt na stronie internetowej oprócz danych teleadresowych może zawierać mapkę dojazdu, formularz kontaktowy, listę oddziałów firmy, itd. Z Google Maps możemy natomiast stworzyć bardzo ciekawe rozwiązanie – oprócz pokazania lokalizacji nałożyć na nie wskazówki dojazdu z wybranego przez użytkownika miejsca.

Wystarczy w tym celu stworzyć dwa elementy. Po pierwsze należy umieścić na stronie odpowiedni wycinek mapy z oznaczonym miejscem. Oprócz tego potrzebny będzie formularz z polem do wpisania adresu początkowego. Po jego zatwierdzeniu, na mapie nałożone zostaną wskazówki dojazdu. Przykład takiego działania można zobaczyć tutaj.

Wstawiamy Google Maps na naszą stronę

Na początek potrzebujemy zdefiniować obiekt, w który wstawimy mapę (div map_canvas), oraz formularz, dzięki któremu użytkownik poda adres początkowy do wyznaczenia trasy.

<div id="map_directions_form">
	<form action="" method="post">
		<label for="map_directions_start">Pokaż na mapie dojazd z:</label>
		<input type="text" value="" id="map_directions_start" />
		<input type="submit" name="" id="show_route" value="Pokaż" />
	</form>
</div>
<div id="map_canvas"></div>

Następnie musimy wczytać odpowiednie dane z Goggle Maps API. Możemy to zrobić dołączając odpowiedni kod JavaScript

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&region=PL"></script>

Parametry GET podane w adresie www mogą być następujące:

• sesnor – oznacza, czy określić położenie użytkownika na podstawie GPS (używany przy korzystaniu z urządzeń mobilnych). Przyjmuje wartość true lub false.
• region – określa region, jakiego będą dotyczyć nasze wyszukiwania. Dzięki niemu możemy ograniczyć do kraju lub kontynentu. Warto to zrobić, gdyż w niektórych przypadkach wpisując miasta możemy zostać oznaczeni na przykład w USA a nie w Polsce.

Kolejnym krokiem jest określenie parametrów mapy, która zostanie wyświetlona. Można to zrobić za pośrednictwem następującego kodu:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

var myLocation = new google.maps.LatLng(52.2302294, 21.0118487);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  
  var myOptions = {
    zoom:15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: myLocation,
    panControl: true,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: false,
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);

  var marker = new google.maps.Marker({
      position: myLocation, 
      map: map,
      title:"Moja lokacja"
  });  
}

W linii 5 definiujemy punkt, gdzie umieszczony zostanie na mapie znacznik wskazujący miejsce. W powyższym przykładzie zostało to zrobione na podstawie współrzędnych GPS. Następnie definiujemy funkcję initialize(), która wyświetli mapę Google. W tablicy myOptions przekazujemy poszczególne parametry konfiguracyjne:

• zoom – stopień przybliżenia mapy (im wyższy, tym większe oddalenie widoku)
• mapTypeId – typ mapy, jaki ma być wyświetlany. Ostatni parametr daje możliwości ustawienia SATELLITE, HYBRID lub TERRAIN.
• center – punkt na jaki mapa ma być wycentrowana – współrzędne GPS, w tym wypadku po prostu zmienna pod którą zdefiniowano naszą lokację

Kolejne zmienne ustawiamy na true lub false w zależności czy chcemy, aby pojawił się odpowiedni element interfejsu mapy:

• panControl – przesuwanie mapy (przyciski kierunków przewijania)
• zoomControl – suwak zbliżenia i oddalenia widoku
• mapTypeControl – przyciski zmiany typu widoku: mapa oraz satelita
• scaleControl – wyświetlanie aktualnej skali mapy (w lewym dolnym rogu)
• streetViewControl – obsługa Street View

W kolejnych liniach określamy, że mapa ma być wstawiona w element o id map_canvas.  Następnie określamy marker, który wskaże oznaczone współrzędne:

• position – współrzędne
• map – mapa (tutaj obiekt utworzony wcześniej)
• title – tooltip jaki pojawi się po najechaniu na marker kursorem myszy

Wskazówki dojazdu

Gdy mamy zdefiniowaną mapę i formularz, możemy stworzyć kod za pośrednictwem którego wyświetlimy wskazówki dojazdu. W tym celu zdefiniujemy następującą funkcję:

function calcRoute() {
  var start = document.getElementById("map_directions_start").value;
  var end = myLocation;
  
  var request = {
      origin:start, 
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

Pod zmienną start wstawiamy podany przez użytkownika w formularzu adres, pod end natomiast nasz punkt docelowy. W powyższym przykładzie podano go za pomocą współrzędnych GPS, można to jednak zrobić przypisując do zmiennej dokładny adres:

var end = "Warszawa, Marszałkowska 100";

Następnie w tablicy request podajemy kilka dodatkowych parametrów:

• orgin – punkt początkowy
• destination – punkt końcowy
• travelMode – sposób podróżowania, parametr może przyjąć wartości: DRIVING, WALKING lub BICYCLING (ostatnia opcja była dostępna w momencie pisania artykułu tylko w USA)

Uruchomienie mapy

Pozostało już tylko wyświetlenie mapy i przypisanie do przycisku submit odpowiedniej funkcjonalności. Posłuży do tego poniższy kod:

$(document).ready(function(){
	initialize();
	
	$("#map_directions_form form").submit(function(event){
		 event.preventDefault();
		 calcRoute();
	});
});

Jak widać uruchomienie usługi jest bardzo proste. Google Maps API zawiera wiele innych ciekawych możliwości, wszystkich zainteresowanych odsyłam do dokumentacji.