Google Maps API 3 – najprostsza implementacja

Google Maps API umożliwia umieszczanie map na własnych serwisach. Dodatkowo oferuje bardzo dużo możliwości dostosowania map do swoich potrzeb. Poniżej chyba najprostsza implementacja z opisem na podstawie Google Maps API 3.

<html>
 
<head>
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
  var mapa;
 
  function inicjalizacja() {
 
    var latlng = new google.maps.LatLng(52,19.5);	//wspolrzedne geograficznego srodka polski - miejscowaosc Piatek
    var mojeUstawienia = {
      zoom: 6,										//powiekszenie
      center: latlng, 								//wycentruj w tej zmiennej
      mapTypeId: google.maps.MapTypeId.ROADMAP 		//typ mapy roadmap
    };
    mapa = new google.maps.Map(document.getElementById("obszar_mapy"), mojeUstawienia);
  }
 
</script>
 
</head>
 
<body onload="inicjalizacja()">
 
<div id="obszar_mapy" style="width:50%; height:50%"></div>
 
</body>
 
</html>

Powyższy listing wystarczy zapisać jako HTML i uruchomić w przeglądarce. Warunkiem działania jest włączona obsługa javascript w przeglądarce.

Znaczniki <html>, <head> oraz <body> nie wymagają dodatkowego tłumaczenia. Pierwszą rzeczą, która nas interesuje jest linia:

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>

Ścieżka http://maps.google.com/maps/api/js wskazuje lokalizacje pliku, który ładuje symbole i definicje potrzebne do korzystania z Google Maps API 3. Ta linia jest wymagana i dodatkowo musi być wywołana z parametrem sensor. Sensor określa czy nasza strona ma dostęp do urządzenia, które jest w stanie podać naszą lokalizację – użyteczne w czasie pisania aplikacji na urządzenia przenośne. W naszym przypadku nie mamy dostępu do czujnika zwracającego nasze położenie.

Poniżej wspomniany plik z definicjami i ustawieniami dla sensor=false.

window.google = window.google || {};
google.maps = google.maps || {};
(function() {
 
  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }
 
  google.maps.Load = function(apiLoad) {
    apiLoad([,[[["http://mt0.google.com/vt/v=ap.111&hl=pl&","http://mt1.google.com/vt/v=ap.111&hl=pl&","http://mt2.google.com/vt/v=ap.111&hl=pl&","http://mt3.google.com/vt/v=ap.111&hl=pl&"],,"ap.111"],[["http://khm0.google.com/kh/v=47&hl=pl&","http://khm1.google.com/kh/v=47&hl=pl&","http://khm2.google.com/kh/v=47&hl=pl&","http://khm3.google.com/kh/v=47&hl=pl&"],,"47"],[["http://mt0.google.com/vt/v=apt.111&hl=pl&imgtp=png32&","http://mt1.google.com/vt/v=apt.111&hl=pl&imgtp=png32&","http://mt2.google.com/vt/v=apt.111&hl=pl&imgtp=png32&","http://mt3.google.com/vt/v=apt.111&hl=pl&imgtp=png32&"],,"apt.111"],[["http://mt0.google.com/vt/v=app.111&hl=pl&","http://mt1.google.com/vt/v=app.111&hl=pl&","http://mt2.google.com/vt/v=app.111&hl=pl&","http://mt3.google.com/vt/v=app.111&hl=pl&"],,"app.111"],"fzwq2t26UMrp0yfEY_OxrefhViYT-bZLtjFxgg",[[,0,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,10,18,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=pl&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,3,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&"]],[,3,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&"]],[,3,10,,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=pl&"]]]],["pl","US","google.com",,,"http://google.com/maps","http://maps.gstatic.com/intl/pl_ALL/mapfiles/","http://gg.google.com"],["http://maps.gstatic.com/intl/pl_ALL/mapfiles/api-3/20"],[3384623025],1], loadScriptTime);
 
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/pl_ALL/mapfiles/api-3/20/main.js");
})();

var mapa – deklaracja zmiennej, w której później będziemy przechowywać obiekt opisujący naszą mapę.

function inicjalizacja() – nazwa funkcji, którą wywołamy w czasie wyświetlania strony.

var latlng = new google.maps.LatLng(52,19.5); – tworzymy obiekt przechowujący długość i szerokość geograficzną. W tym przypadku są to współrzędne geometrycznego środka Polski – miejscowość Piątek w woj. łódzkim.

var mojeUstawienia = – zmienna przechowująca ustawienia naszej mapy takie jak zoom: 6 (powiększenie), center: latlng (ustawienie środka mapy na współrzędne przechowywane w zmiennej latlng), mapTypeId: google.maps.MapTypeId.ROADMAP (ustawienie typu wyświetlanej mapy na drogową; możliwe inne typy: HYBRID – połączenie satelitarnej z drogową, SATELLITE – tylko satelitarna, TERRAIN – tylko terenowa)

mapa = new google.maps.Map(document.getElementById(„obszar_mapy”), mojeUstawienia); - do naszej zmiennej mapa przypisujemy obiekt. Jako węzeł łączący kod javascript z HTML używamy zmiennej obszar_mapy, dodatkowo podajemy zdefiniowane wcześniej przez nas ustawienia.

<body onload=”inicjalizacja()”> – wywołujemy nasz skrypt inicjalizacyjny w czasie zdarzenia ładowania strony.

<div id=”obszar_mapy” style=”width:50%; height:50%”></div> – odwołujemy się do utworzonej przez nas mapy i ustawiamy jej szerokość i wysokość na 50% wysokości i szerokości okna przeglądarki.

Poniżej wynik działania listingu.