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.

Na zakończenie niniejszego poradnika otrzymamy efekt, który można zobaczyć w całości tutaj. Będzie to formularz umożliwiający dodanie nowej osoby do przykładowego systemu. Znajdzie się na nim kilka pól, w tym lista rozwijana z nazwami zawodów a obok niej przycisk „Dodaj nowy”. Po jego kliknięciu pojawi się odpowiednie okno z formularzem dodania rekordu. Pomijam tu fakt, że pola będą generowane na podstawie danych z bazy, oraz uproszczam wygląd samego formularza (osoba a nie imię, nazwisko, itd).

Na początek stwórzmy więc formularz, który będzie widoczny od samego początku na ekranie.

<form action="" method="post">
  <div class="field">
    <label for="person">Osoba</label>
    <input type="text" name="person" id="person" value=""/>
  </div>
  <div id="add-new-subform">
  <label for="new-occupation">Nowy zawód</label>
  <input type="text" value="" name="new-occupation" id="new-occupation" />
  <input type="button" value="Dodaj" id="add-new-save" />
  <input type="button" value="Anuluj" id="add-new-cancel" />
  </div>
  <div class="field">
    <label for="occupation">Zawód</label>
    <select name="occupation" id="occupation">
      <option value="1">Opcja 1</option>
      <option value="2">Opcja 2</option>
      <option value="3">Opcja 3</option>
      <option value="4">Opcja 4</option>
    </select>
    <input type="button" value="+" id="add-new-show" />
  </div>
  <div class="field">
    <label for="information">Uwagi</label>
    <textarea name="information" id="information" rows="5" cols="10"></textarea>
  </div>
  <div>
    <input type="submit" value="Zapisz" />
  </div>
</form>

W powyższym formularzu zostały umieszczone trzy pola: tekstowe, select oraz textarea. W divie „add-new-subform” znajdzie się podformularz z polem tekstowym, który pojawi się w momencie dodawania nowego rekordu. Nie będę tu prezentował całego pliku CSS, można go zobaczyć w zaprezentowanym wcześniej przykładzie.

Ważne są dwie definicje. Po pierwsze, należy ukryć podformularz i przygotować go do wyświetlenia na pierwszym planie (wyskoki z-index):

div#add-new-subform {position: absolute; display: none; z-index: 100;
 background-color: #fff; border: solid 1px #000; padding: 15px;}

Dodatkowo zdefiniujemy obiekt, który „ściemni” całość widocznej strony. Ważne, aby znalazł się on na obecnie widocznym obszarze, ale pod nowym oknem formularza. Dlatego musi mieć odpowiednią wartość z-index i na początku pozostać niewidoczny. Definicje przeźroczystości zostały przedstawione w sposób, dzięki któremu powinny się wyświetlać poprawnie we wszystkich popularnych przeglądarkach:

div#cover {position: fixed; width: 100%; height: 100%;
z-index: 99; background-color: #000000; -moz-opacity: 0.7; 
opacity: 0.7; filter: alpha(opacity=70);}

Teraz pozostaje oprogramowanie funkcjonalności w jQuery (dokładny opis poniżej):

$(document).ready(function(){
    $('#add-new-show').click(function(){
	// dodanie ciemnego tła
	$('body').prepend('<div id="cover">&nbsp;</div>');
	// wyświetlenie podformularza
	$("#add-new-subform").css({'display': 'block'});
      
	$("#add-new-save").click(function(){
	  var new_occupation = $("#new-occupation").val();
	  if(typeof new_occupation !== "undefined" && new_occupation){
	    // dodanie nowego rekordu do bazy oraz wpisu w polu select 
	    addNewOccupation(new_occupation);
	    // usunięcie ciemnego tła i ukrycie podformularza
	    $('#cover').remove();
	    $("#add-new-subform").css({'display': 'none'});
	  };
	});
	
	$("#add-new-cancel").click(function(){
	    // usunięcie ciemnego tła i ukrycie podformularza
	    $('#cover').remove();
	    $("#add-new-subform").css({'display': 'none'});
	});
    });
});      

function addNewOccupation(new_occupation){
  // tutaj za pomoca AJAX mozna dodać do bazy nowy rekord
  // zapytanie powinno zwrócić id nowego zawodu
  var id = 100;	// id nowego zawodu dodanego do bazy
  $("#occupation").append(new Option(new_occupation,id));
  $("#occupation").val(id);
}

Na początek ustalamy działanie dla akcji kliknięcia w przycisk „+” (#add-new-show). Kolejno: dodajemy nową warstwę do dokumentu, która przykryje całą obecnie wyświetlaną stronę (patrz definicja styli dla #cover) oraz wyświetlamy podformularz.

Następnie definiujemy odpowiednie działania dla klikniętego przycisku zapisania nowego zawodu (#add-new-save). Gdy został on wpisany w pojawiającym się polu tekstowym, wywołujemy funkcję addNewOccupation(), po czym usuwamy ciemne tło i ukrywamy podformularz. Funkcja dodania nowego zawodu powinna zawierać wywołanie AJAX, zapisujące dane do bazy po uprzednim sprawdzeniu ich poprawności. Wynikiem powinno być id dodanego rekordu, dzięki czemu będziemy mogli parę id oraz nazwa zawodu dopisać do pola select na formularzu głównym, a następnie zaznaczyć ją jako wybraną. W zaprezentowanym przykładzie nie przedstawiono samego zapisu do bazy, a do zmiennej id przypisana została przykładowa wartość.

Powyższy przykład został zaprezentowany w bardzo uproszczony sposób, może stanowić podstawę do własnej implementacji ciekawego wywołania okna dialogowego. Dostosowanie do własnych potrzeb nie powinno stanowić większego problemu.