Google Maps Api cz.4

W tej części przybliżę zdarzenia oraz geokodowanie. Kod z poprzednich części będzie rozbudowywany. Zdarzenia w Google Maps API otwierają przed nami wiele ciekawych możliwości. Nie sposób opisać tutaj wszystkich dostępnych zdarzeń dla różnych obiektów. Przedstawię zdarzenia na przykładzie prostej aplikacji. Rejestruje ona współrzędne położenia markera w momencie zakończenia jego przeciągania i wyświetla te współrzędne w odpowiednich znacznikach div. Zdarzenia obsługuje się za pomocą metody addListener() obiektu GEvent. Dodajmy na końcu funkcji createMarkerDrag() dodatkowy kod obsługujący zdarzenie. Teraz funkcja wygląda następująco:

function createMarkerDrag(punkt,tresc) {
        var marker = new GMarker(punkt,{title: 'Najechałeś na mnie myszką', draggable: true, icon: ikonka});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(tresc);
        });
	
	GEvent.addListener(marker, "dragend", function() {
    var coord = marker.getPoint();
    var x = coord.x;
    var y = coord.y;
    document.getElementById("coord_x").firstChild.nodeValue = x;
    document.getElementById("coord_y").firstChild.nodeValue = y;
  });
    map.addOverlay(marker);
}

Wewnątrz body umieśćmy dwa znaczniki div. W nich wyświetlać się będą współrzędne punktu wyznaczonego przez marker. Funkcja addListener() przyjmuje trzy parametry: obiekt, do którego przypisujemy zdarzenie, ciąg znaków określający rodzaj zdarzenia (np. dragend, click, dblclick) oraz funkcję, która ma być wywołana w momencie zajścia zdarzenia. Pełny spis zdarzeń dostępnych dla poszczególnych obiektów można znaleźć w dokumentacji. My wykorzystamy zdarzenia dragend. Oznacza ono zakończenie przeciągania markera. Funkcja obsługująca zdarzenie najpierw pobiera punkt z markera (marker.getPoint()), a następnie rozkłada go na współrzędne x i y. Ostatnią czynnością jest wstawienie współrzędnych do wcześniej przygotowanych divów. Dodajmy jeszcze dla naszego markera efekt mouseover i mouseout. Do funkcji wystarczy dopisać:

GEvent.addListener(marker, "mouseover", function() {
    marker.setImage("custom_marker2.png");
});
GEvent.addListener(marker, "mouseout", function() {
    marker.setImage("custom_marker.png");
});

Pierwsze zdarzenie podmieni obrazek markera na plik custom_marker2.png po najechaniu na niego myszką, drugie przywróci poprzedni obrazek po zjechaniu z markera. Pełny kod pliku:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Pierwsza mapa</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEY" type="text/javascript"></script>
	    <script type="text/javascript">
    //<![CDATA[
	function init()
{
    if (GBrowserIsCompatible()) { 
	var map = new GMap2(document.getElementById("mapa"));
      	map.addControl(new GLargeMapControl());
      	map.addControl(new GMapTypeControl());
      	map.setCenter(new GLatLng(51.7592485,19.4559833),7);

      function createMarker(punkt,tresc) {
        var marker = new GMarker(punkt);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(tresc);
        });
	map.addOverlay(marker);
      }
	   // deklaracja nowej ikony  
    var ikonka = new GIcon();  
    ikonka.image = "custom_marker.png"; 
    ikonka.iconAnchor = new GPoint(16, 32);
    ikonka.shadow = "";
    ikonka.infoWindowAnchor = new GPoint(16,16); 
    ikonka.iconSize = new GSize(32, 32);

	  function createMarkerDrag(punkt,tresc) {
        var marker = new GMarker(punkt,{title: 'Najechałeś na mnie myszką', draggable: true, icon: ikonka});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(tresc);
        });
	//do zdarzen
	GEvent.addListener(marker, "dragend", function() {
	var coord = marker.getPoint();
	var x = coord.x;
	var y = coord.y;
	document.getElementById("coord_x").firstChild.nodeValue = x;
	document.getElementById("coord_y").firstChild.nodeValue = y;
	});
	GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("custom_marker2.png");
        });
	GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("custom_marker.png");
        });
	map.addOverlay(marker);
      }
     // czytamy dane z pliku markery.xml
      GDownloadUrl("markery.xml", function(dane) {
		var xmlDoc = GXml.parse(dane);
		var markers = xmlDoc.getElementsByTagName("marker");
	
		for (var i = 0; i < markers.length; i++) {
		// przetwarzamy atrybuty znaczników marker
		var lat = parseFloat(markers[i].getAttribute("lat"));
		var lng = parseFloat(markers[i].getAttribute("lng"));
		var point = new GLatLng(lat,lng);
		var html = GXml.value(markers[i].getElementsByTagName("opis")[0]);
		var drag = parseInt(markers[i].getAttribute("drag"));
		// tworzymy marker
			if(drag==1)
			{
				createMarkerDrag(point,html);
			}
			else
			{
				createMarker(point,html);
			}
		}
      });
    }
}
    //]]>
    </script>
  </head>
  <body onload="init()" onunload="GUnload()">
    <div id="mapa" style="width: 500px; height: 400px"></div> 
<div id="coord_x"> </div><div id="coord_y"> </div>
  </body>
</html>

Geokodowanie

Geokodowanie polega na przekształceniu adresu np. Łódź, Piotrkowska 95 na punkt na mapie. W Polsce geokodowanie z dokładnością do numeru budynku można stosować tylko dla większych miast. Należy stworzyć obiekt klasy GClientGeocoder(). Posiada on metodę getLatLng(), która przekształca adres na współrzędne. Metodzie tej musimy przekazać dwa parametry: adres oraz funkcję, która będzie wykonana po zgeokodowaniu adresu. My będziemy odczytywać adresy z pliku XML. Zamiast atrybutów lat i lng, dodaliśmy atrybut adres.

<markery>
	<marker adres="Łódź, Piotrkowska 95"  label="Marker One" drag="0">
		<opis><![CDATA[
			Jakiś opis, w którym <b>można</b> używać html 
		]]></opis>
	</marker>
	<marker adres="Warszawa, Samolotowa 1" label="Marker Two" drag="0">
		<opis><![CDATA[
			       Drugi marker 
		]]></opis>
	</marker>
	<marker adres="Łódź, Sokola 3" label="Marker Three" drag="0">
		<opis><![CDATA[
			       Trzeci marker 
		]]></opis>
	</marker>
</markery>

Najpierw stworzymy obiekt GClientGeocoder().

var geocoder = new GClientGeocoder();

Następnym krokiem jest opracowanie działania funkcji przetwarzającej otrzymany adres. Funkcja ta jest drugim parametrem dla metody getLatLng().

geocoder.getLatLng(adres,function(point)
{
	if (!point)
	{
		alert(adres + " nie został znaleziony."); 
	}
	else
	{
		if(drag==1)
		{
			createMarkerDrag(point,html);
		}
		else
		{
			createMarker(point,html);
		}
	}
});

Adres miejsca z pliku XML złapiemy w następujący sposób:

var adres = markers[i].getAttribute("adres");

Funkcja przetwarzająca adres wstawia marker lub wyświetla komunikat, jeśli adres nie został znaleziony.
Pełny kod pliku:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Pierwsza mapa</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEY" type="text/javascript"></script>
	    <script type="text/javascript">
    //<![CDATA[
	function init()
{
    if (GBrowserIsCompatible()) { 
	var map = new GMap2(document.getElementById("mapa"));
	var geocoder = new GClientGeocoder();
      	map.addControl(new GLargeMapControl());
      	map.addControl(new GMapTypeControl());
      	map.setCenter(new GLatLng(51.7592485,19.4559833),7);

      function createMarker(punkt,tresc) {
        var marker = new GMarker(punkt);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(tresc);
        });
	map.addOverlay(marker);
      }
	   // deklaracja nowej ikony  
    var ikonka = new GIcon();  
    ikonka.image = "custom_marker.png"; 
    ikonka.iconAnchor = new GPoint(16, 32);
    ikonka.shadow = "";
    ikonka.infoWindowAnchor = new GPoint(16,16); 
    ikonka.iconSize = new GSize(32, 32);

	  function createMarkerDrag(punkt,tresc) {
        var marker = new GMarker(punkt,{title: 'Najechałeś na mnie myszką', draggable: true, icon: ikonka});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(tresc);
        });
	GEvent.addListener(marker, "dragend", function() {
	var coord = marker.getPoint();
	var x = coord.x;
	var y = coord.y;
	document.getElementById("coord_x").firstChild.nodeValue = x;
	document.getElementById("coord_y").firstChild.nodeValue = y;
	});
	GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("custom_marker2.png");
        });
	GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("custom_marker.png");
        });
	map.addOverlay(marker);
      }
	function geoc(adres,html)//html to opis w dymku
	{
		geocoder.getLatLng(adres,
			function(point)
			{
				if (!point) {
					alert(adres + " not found");
				}
				else 
				{
					createMarker(point,html);
				}
			}
		);
	}
	
     	// czytamy dane z pliku markery.xml
      	GDownloadUrl("markery2.xml", function(dane) {
		var xmlDoc = GXml.parse(dane);
		var markers = xmlDoc.getElementsByTagName("marker");
	
		for (var i = 0; i < markers.length; i++) {
		var adres = markers[i].getAttribute("adres");
		var html = GXml.value(markers[i].getElementsByTagName("opis")[0]);
		var drag = parseInt(markers[i].getAttribute("drag"));
		geoc(adres,html);
		}
      });
    }
}
    //]]>
    </script>
  </head>
  <body onload="init()" onunload="GUnload()">
    <div id="mapa" style="width: 500px; height: 400px"></div> 
<div id="coord_x"> </div><div id="coord_y"> </div>
  </body>
</html>