Markery, znaczniki, punkty, ikony i komentarze

Linki:
Podstawy Google Maps
Komponenty Google Maps
Geo-Finder - zrób sobie mapę

Markery, ikony, komentarze

Marker, punkt standardowy
Do oznaczenie wybranych punktów na mapach stosuje się markery graficzne. Standardowy marker pochodzi z biblioteki Google Maps API. Nie ma ograniczeń co do ilości markerów na mapie. Każdy marker może być elementem aktywnym klikniecie którego spowoduje wyświetlenie efektownego pola komentarza - "chmurki" z opisem, zdjęciami itp. Wyświetlenia markera zapewni poniższy kod. Jeżeli w linii 10 umieścimy kod marker.openInfoWindowHtml(info); to po załadowaniu strony marker zostanie wyświetlony z "chmurką" w którym będzie treść zdefiniowana w zmiennej info (linia 3).

PRZYKŁAD 11a - pole komentarza po kliknięciu markera
PRZYKŁAD 11b - pole komentarza po załadowaniu strony

Zmienna info może zawierać kod HTML formatowany przez CSS. Efektownie wyglądają informacje zawierające fotografie, linki itp.

PRZYKŁAD 11c

Inny sposób wyświetlania markerów
Na potrzeby map z wieloma markerami wyświetlanych przez skrypty PHP gdzie dane o położeniu markerów odczytuje się np. z baz danych MySQL dużo lepiej nadaje się procedura pokazana w kolejnych przykładach.

PRZYKŁAD 11d

Marker i "chmurka" z zakładkami
Do prezentacji większej ilości danych w polu komentarza wyświetlanego przy markerze można wprowadzić zakładki. Ich ilość jest dowolna. Najczęściej spotka się 2 zakładki. Patrz przykłady:

PRZYKŁAD 12 - pole komentarza po kliknięciu markera
PRZYKŁAD 12a - pole komentarza po załadowaniu strony

Własne wzory markerów
Możemy definiować własne wzory markerów. Każda definicja składa się z dwóch plików graficznych: markera i cienia. Jezeli chcemy uzyskać przeźroczystość należy stosować format graficzny png. Na potrzeby tego przykładu posłużymy się udostępnionym przez Google wzorem minimarkera. Poniższy przykład pokazuje sposób wyświetlenia takiego markera.

PRZYKŁAD 13a - pole komentarza po kliknięciu markera
PRZYKŁAD 13b - pole komentarza po załadowaniu strony

Ikony własne i predefiniowane
Google udostępnia duży zestaw ikon do wyświetlania na mapach. Mozemy je również tworzyć sami podobnie jak markery. Aby wyświetlić ikonę należy ją wcześniej zdefiniować. Tak naprawdę to nie ma różnicy między markerami i ikonami. Ikony również mogą być wyświetlane z komentarzami.

PRZYKŁAD 14 - zestaw ikon Google

Wiele rodzajów markerów na jednej mapie
Kolejny przykład pokazuje wykorzystanie wcześniejszych metod do wyświeltenia omawianych rodzajów markerów na jednej mapie.

PRZYKŁAD 15

Skopiuj treść z przykładu 15 do pliku mapa.php, wklej swój klucz w linii 17,18.

<?php
  $lat=52.17393169256846;
  $lng=18.8525390625;
  $zoom=6;
  $width=500;
  $height=500;
 ?>
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>Google Maps JavaScript API Example</title>
 
 	//tu umieść kod-klucz uzyskany po rejestracji 	
      <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIrewer8yqPxU-uv8SSsdfFmuthQ-fKFmb-_4MFiFRsdfjhEjmXN8-BQB3CETjsdfsdfwerghfDPyyYflQ"
        type="text/javascript"></script>
 	//koniech kodu klucza
 
      <script type="text/javascript">
  
      //<![CDATA[
 
 <?php
  print("var lat=".$lat.";\n");
  print("var lng=".$lng.";\n");
  print("var zoom=".$zoom.";\n");
 ?>
 
      function load() {
        if (GBrowserIsCompatible()) {
          var map = new GMap2(document.getElementById("map"));
 	map.setCenter(new GLatLng(lat, lng), zoom);
 
 var icon = new GIcon();
 icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
 icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
 icon.iconSize = new GSize(12, 20);
 icon.shadowSize = new GSize(22, 20);
 icon.iconAnchor = new GPoint(6, 20);
 icon.infoWindowAnchor = new GPoint(5, 1);
 
 
 	function createMarker(point, number, icon) {
           var marker = new GMarker(point, icon);
           GEvent.addListener(marker, "click", function() {
             marker.openInfoWindowHtml(number);
           });
           return marker;
         }
 
 	var point = new GLatLng(52.392153883603726, 16.95018768310547);
 	map.addOverlay(createMarker(point, 'info1',icon));
 
 	var point = new GLatLng(52.312153883603726, 16.15018768310547);
 	map.addOverlay(createMarker(point, 'info2'));
 
 
        }
      }
  
      //]]>
      </script>
    </head>
    <body onload="load()" onunload="GUnload()">
      <div id="map" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px">
      </div>
    </body>
  </html>

Informacja Przykłady na tej stronie oparto na kodzie z dokumentacji Google Maps API opracowanej przez firmę Google.

Reklama
Pozycjonowanie