Mapy satelitarne, komponenty, typy map - nawigacja

Linki:
Podstawy Google Maps
Rodzaje map
Umieszczamy obiekty na mapie

Elementy nawigacji mapy

Poruszanie się po mapie
Mapę można przesuwać w pionie i poziomie przy pomocy myszy przez "chwycenie" i poruszanie myszką oraz korzystając z 3 rodzajów manipulatorów wyświetlanych w lewym górnym rogu mapy. Należy tylko w linii 33 wkleić odpowiedni kod do skryptu z przykładu 9.

Zobacz przykłady
P-3. manipulator z suwakiem zoom - map.addControl(new GLargeMapControl());
P-4. manipulator z klawiszami zoom - map.addControl(new GSmallMapControl());
P-5. tylko klawisze zoom - map.addControl(new GSmallZoomControl());

Jak wyznaczyć współrzędne Lat, Lng, Zoom ?
Jeżeli chcesz umieścić na swojej stronie Google Maps z konkretną lokalizacją, określ współrzędne i zoom przy pomocy narzędzia Geo Finder. Możesz również wygenerować gotowy kod z JavaScript do wyświetlenia mapy rastrowej, satelitarnej i hybrydowej.

Lupa i widok ogólny mapy

Lupa umieszczona jest w prawym dolnym rogu mapy. Aby ją wyświetlić wystarczy dodać fragment kodu z linii 34.
PRZYKLAD 6 - map.addControl(new GOverviewMapControl());

Skala - podziałka

Skala umieszczona jest w lewym dolnym rogu mapy. Aby ją wyświetlić wystarczy dodać fragment kodu z linii 35.
PRZYKLAD 7 - map.addControl(new GScaleControl());

Rodzaje map

Mapa satelitarna, hybrydowa, rastrowa to klawisze służące do wyboru typu wyswietlanej mapy. Umieszczone są w prawym górnym rogu mapy. Aby je wyświetlić wystarczy dodać fragment kodu w linii 36.
PRZYKLAD 8 - map.addControl(new GMapTypeControl());

Polskie napisy na klawiszach wyboru rodzaju mapy. Możliwa jest również zmiana opisu klawiszy wyboru rodzaju mapy. W tym celu należy miedzy linie 35 i 36 kodu wkleić ponizszy fragment.
PRZYKLAD 9

<?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.addControl(new GLargeMapControl ());
 		map.addControl(new GOverviewMapControl());
 		map.addControl(new GScaleControl());
        	map.addControl(new GMapTypeControl());
         map.setCenter(new GLatLng(lat, lng), zoom);
        }
      }
  
      //]]>
      </script>
    </head>
    <body onload="load()" onunload="GUnload()">
      <div id="map" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px">
      </div>
 <BR>
      <A href="http://www.web4you.com.pl" target="_blank"><img src="http://www.web4you.com.pl/template/web4you.gif" alt='porady dla webmasterow' border=0 width="80" height="15" target="_blank">
    </body>
  </html>

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

Reklama
Pozycjonowanie