Mapy Google - kreator ścieżek

API dołączone do map Googla umożliwia łatwe zbudowanie kreatora ścieżek (linii - GPolyline) oraz wielokątów (GPolygon). Metody dołączone od wersji 2.111 - enableDrawing oraz enableEditing tworzą praktycznie całe środowisko do składania ścieżek. Pozostaje jedynie dorobić opcje wyświetlania współrzędnych w taki sposób, aby można było je wykorzystać w kolejnej aplikacji.

Pierwszym etapem dodawania ścieżki jest utworzenie obiektu GPolygon oraz uruchomienie trybu edycji. W celu rozpoczęcia edycji nie musimy podawać żadnych punktów do linii, wystarczy podać pustą tablicę.

var poly = new GPolyline([]);
map.addOverlay(poly); 

Po dodaniu do mapy wykonywana jest operacja włączenia trybu edycji.

poly.enableDrawing();

W celu włączenia możliwości edycji po wygenerowaniu zmiennej ustalane jest działanie enableEditing oraz disableEditing. W przykładzie edycja będzie włączana dopiero w momencie najechania myszką na linię (mouseover) oraz wyłączana po usunięciu się kursora z linii (mouseout). Parametr onEvent pozwala określać, podczas którego zdarzenia ma zostać ustawiony tryb edycji. Co ciekawe w oficjalnej dokumentacji nie ma podanego tego parametru - jednak we wpisie na oficjalnym blogu map Googla już jest.

poly.enableEditing({onEvent: "mouseover"});
poly.disableEditing({onEvent: "mouseout"});

Na koniec pozostaje wyeksponować dane wygenerowanej ścieżki. W tym celu wykorzystany zostanie element textarea, do którego będą wpisywane dane w formacie lat, lng\n. Koniec kreacji linii następuje w momencie, kiedy nastąpi zdarzenie podwójnego kliknięcia. Wówczas zostanie wywołane zdarzenie "endline" dla generowanej ścieżki, gdzie zdefiniujemy wyświetlanie parametrów ścieżki. W przypadku, kiedy linia jest edytowana przez przeciąganie punktów znajdujących się pomiędzy wierzchołkami wywoływane jest zdarzenie "lineupdated". Rozpatrywany przypadek nie wymaga zmiany logiki w przypadku tych dwóch zdarzeń, dlatego zdefinujemy dwa razy to samo dla różnych zdarzeń.

GEvent.addListener(poly, "endline", function() {
    document.getElementById('textarea').innerHTML = '';
    for (var i=0; i<poly.getvertexcount(); i++)="" {="">
       var vertex = poly.getVertex(i);
       document.getElementById('textarea').innerHTML += vertex.lat()+', '+vertex.lng()+"\n";
    }
});
           
GEvent.addListener(poly, "lineupdated", function() {
   document.getElementById('textarea').innerHTML = '';
   for (var i=0; i<poly.getvertexcount(); i++)="" {="">
      var vertex = poly.getVertex(i);
      document.getElementById('textarea').innerHTML += vertex.lat()+', '+vertex.lng()+"\n";
   }
}); 

Na koniec składając wszystko razem wychodzi funkcja draw(), którą można podczepić do zdarzenia click linku lub innego elementu:

function draw() {
 poly = new GPolyline([]);
 map.addOverlay(poly);
 poly.enableDrawing();
  
 poly.enableEditing({onEvent: "mouseover"});
 poly.disableEditing({onEvent: "mouseout"});
 GEvent.addListener(poly, "endline", function() {
  document.getElementById('textarea').innerHTML = '';
  for (var i=0; i<poly.getVertexCount(); i++) {
   var vertex = poly.getVertex(i);
   document.getElementById('textarea').innerHTML += vertex.lat()+', '+vertex.lng()+"\n";
  }
 });
     
 GEvent.addListener(poly, "lineupdated", function() {
  document.getElementById('textarea').innerHTML = '';
  for (var i=0; i<poly.getVertexCount(); i++) {
   var vertex = poly.getVertex(i);
   document.getElementById('textarea').innerHTML += vertex.lat()+', '+vertex.lng()+"\n";
  }
 });
}

I w ten sposób mamy działający generator ścieżek (do linku 'Nowa linia' jest podpięta funkcja draw() :)):



Nowa linia