Design Concept
  1. Blog
  2. Google Maps API cz.2

Google Maps API cz.2

Niniejszy artykuł jest kontynuacją poprzedniego wpisu Google Maps Api. Omówię w nim markery i dymki informacyjne oraz ich opcje.

Markery i dymki informacyjne

Rozbudujemy teraz naszą mapę, dodając do niej markery. Markery po kliknięciu będą pokazywały dymki z tekstem. Stwórzmy prostą funkcję dodającą markery. 
function createMarker(punkt,tresc) {
    var marker = new GMarker(punkt);
    GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml(tresc);
    });
    map.addOverlay(marker);
}
Nasza funkcja będzie przyjmowała dwa parametry: punkt, w którym ma być umieszczony marker oraz tekst dymka. Zaczynamy od stworzenia markera z pomocą funkcji GMarker(), której jako argument podajemy punkt na mapie. Punkt musi być obiektem GLatLng. Funkcja GMarker może też przyjmować drugi parametr określający dodatkowe opcje (dowiemy się o nich już wkrótce). Za wyświetlenie dymka informacyjnego po kliknięciu na marker jest odpowiedzialny następujący kod: 
GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(tresc);
});
Treść, którą podamy jako argument funkcji openInfoWindowHtml() zostanie wyświetlona wewnątrz dymka. Treść ta może być również kodem html. Marker wstawiamy na mapę funkcją addOverlay() wykonaną na obiekcie naszej mapy. Funkcja gotowa, zatem stwórzmy jakiś marker. 
var punkt = new GLatLng(51.7592485,19.4559833);
createMarker(punkt,'Miasto Łódź');
Najpierw określiliśmy punkt, w którym chcemy go umieścić. Następnie naszą funkcją createMarker() tworzymy marker, po którego kliknięciu wyświetli się okienko z napisem 'Miasto Łódź'. Można dodać na mapę kolejne markery w ten sam sposób. Kod całej strony: 
<!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);
      }

      var punkt = new GLatLng(51.7592485,19.4559833);
      createMarker(punkt,'Miasto Łódź');
    }
}
    //]]>
    </script>
  </head>
  <body onload="init()" onunload="GUnload()">
    <div id="mapa" style="width: 500px; height: 400px"></div>
  </body>
</html>
Można też tworzyć dymki informacyjne bezpośrednio na mapie. Należy wstawić wtedy następujący kod: 
map.openInfoWindowHtml(new GLatLng(52.4193,19.5816),'To nasze okienko informacyjne na mapie');

Opcje markerów

W tym artykule przerobimy poprzednią mapę. Na początek pobawimy się opcjami i ikonami markerów. Poprzednio tworząc markera przekazywaliśmy do konstruktora klasy Gmarker tylko jeden parametr. Można przekazać mu drugi (opcjonalny) parametr określający dodatkowe opcje markera. Ilustruje to poniższy listing: 
var marker = new GMarker(punkt,opcje);
Można podać kilka opcji jednocześnie w następującym formacie: {opcja_1: wartość_opcji_1, opcja_2: wartość_opcji_2 .... , opcja_n: wartość_opcji_n} Przedstawię teraz niektóre z opcji, które można określić (więcej na stronie)
  • clickable – jeśli false marker jest nieklikalny, jeśli true (domyślnie) klikalny,
  • draggable – sterowanie możliwością przeciągania markera za pomocą myszy,
  • icon – można określić ikonę markera przekazując mu obiekt GIcon, domyślna ikona to G_DEFAULT_ICON,
  • title – określa tekst pojawiający się po najechaniu myszką na marker
Stwórzmy nową funkcję wstawiającą markery. Nazwijmy ją createMarkerDrag – będzie ona tworzyć markery, które można przesuwać po mapie i pokazujące tooltipy po najechaniu na nie myszką. Musimy więc dodać dodatkowe opcje naszemu markerowi. 
var marker = new Gmarker(punkt,{title: 'Najechałeś na mnie myszką', draggable: true});
Cała funkcja przedstawia się następująco: 
function createMarkerDrag(punkt,tresc) {
      var marker = new GMarker(punkt,{title: 'Najechałeś na mnie myszką', draggable: true});
      GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml(tresc);
      });
      map.addOverlay(marker);
    }
Teraz po najechaniu na marker pojawia się napis i można go przesuwać po mapie.
Mamy możliwości również zmiany standardowej ikony markera. Trzeba stworzyć tylko nowy obiekt GIcon i przypisać go naszemu markerowi. Oczywiście musimy mieć też ikonę do podmiany. Możemy ją stworzyć sami lub skorzystać ze zbiorów w internecie. Ja przygotowałam następującą ikonę. Zmienimy ikonę przeciąganego markera. Na początek trzeba stworzyć obiekt nowej ikony. 
var ikonka = new GIcon();
Następnie przekazujemy ikonie następujące atrybuty: 
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);
Pierwszy z nich to ścieżka do pliku z obrazkiem, potem punkt zaczepienia ikony, cień ikony (my nie będziemy stosować cienia więc pozostawiamy tu pusty ciąg znaków), punkt zaczepienia okienka informacyjnego oraz wielkość ikony. Teraz wystarczy już tylko dodać naszą ikonkę do markera: 
var marker = new GMarker(punkt,{title: 'Najechałeś na mnie myszką', draggable: true, icon: ikonka});
Kod całego 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);
        });
	map.addOverlay(marker);
      }
      var punkt = new GLatLng(51.7592485,19.4559833);
      createMarker(punkt,'Miasto Łódź');
	var punkt = new GLatLng(51.7592485,18.4551233);
      createMarkerDrag(punkt,'Inny opis');
    }
}
    //]]>
    </script>
  </head>
  <body onload="init()" onunload="GUnload()">
    <div id="mapa" style="width: 500px; height: 400px"></div>
  </body>
</html>
Definiując ikonę nie musimy określać wszystkich jej parametrów. Możemy stworzyć ją na podstawie innej, zmieniając tylko te parametry, które są nam potrzebne. Tu na przykład tworzymy ikonę na podstawie domyślnej G_DEFAULT_ICON i zmieniamy jej tylko obrazek. 
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
Możemy też określić cień dla ikony. Podajemy wtedy adres obrazka z cieniem. Duży zbiór ikon wraz z cieniami znajduje się na stronie. 
var Icon = new GIcon(G_DEFAULT_ICON);
Icon.image = 'http://adres_do_obrazka';
Icon.shadow = 'http://www.google.com/mapfiles/shadow50.png';
Icon.iconSize = new GSize(20, 34);
Icon.shadowSize = new GSize(37, 34);
Icon.iconAnchor = new GPoint(9, 34);
Icon.infoWindowAnchor = new GPoint(9, 2);