Webstack
Bejelentkezés

Elfelejtetted a jelszavad?

Nem vagy még tag? Kattints ide és regisztrálj most!

Google Maps Javascript API

Google Developers | tomizej  | 2013-03-06 07:03:52

A googlemaps.com, a világ egyik legelterjedtebb térkép alkalmazása egyre inkább betörte magát a webes világba. Számos helyen szükséges lehet és valahol elengedhetetlen is a térkép beépítése a weboldalba. Térkép alatt érthetünk egy egyszerű térképet a több jelölőpontos útvonaltervezőig is. A google arra törekszik, hogy a legtöbb helyen a google maps térképet használják. Régóta biztosítanak olyan lehetőséget, hogy az általunk beállított térképet, miután megtaláltuk a keresett címet, be tudjuk építeni egyszerűen a weboldalainkba egy egyszerű iframes beágyazással. Viszont sok esetben ez nem mindig elég, mivel egyáltalán nem testre szabható.

Néhány gyakori eset, ami előfordul:

  • Több jelölőpontot kell megjeleníteni egy térképen
  • A jelölőpont ikonokat le kellene cserélni egyedi általunk megrajzolt ikonokra (Pl.: az éttermeink logója)
  • Dinamikusan kellene elhelyezni jelölőpontokat a térképen, amit a mi rendszerünkben lehet menedzselni.
  • A jelölőpontokhoz egyedi információs buborékokat szeretnénk megjeleníteni az adott hely rövid leírásával, néhány képpel és hivatkozással.

A fenti esetek egyike sem megvalósítható az Iframe-es beszúrással. Ezért a google létrehozott számos hihetetlenül hasznos API-t, amivel a fejlesztők szabad kezet kaphatnak. Első körben a GoogleMaps Javascript API v3-al fogunk foglalkozni. Ez nevéből is adódóan egy natív Javascript interfész. Gyakorlatilag JS-el tudjuk programozni a térkép viselkedését. A google maps rengeteg hasznos funkciója tárul elénk, így nagyon komoly térképes alkalmazásokat is tudunk fejleszteni.

Telepítés, az API beépítése a weboldalba

API Key regisztrálása

A Google Maps API-t egy u.n API Key használatával kell betölteni. Ennek segítségével monitorozhatjuk, hogy hányszor használják a térkép alkalmazásunkat, ugyanis a google-nek van egy napi limite, amit nem lehet meghaladni. Ez amúgy 25 000 db térkép betöltést jelent naponta, ami azért a legtöbb esetben elég szokott lenni. Hatalmas forgalmú oldalaknál, ha mégis meghaladnánk ezt a limitet, természetesen némi jelképes összegért vásárolhatunk üzleti csomagot, amivel bővíthető a határ.

Hogyan szerezhető be API key?

  1. Látogassunk el erre az oldalra: https://code.google.com/apis/console és jeletkezzünk be a google fiókunkkal.
  2. Kattintsunk a Services menüre és aktiváljuk a Google Maps API v3 szolgáltatást.
  3. Nézzük meg az API Access menüpontot és másoljok ki az API key-t.

Alapjából ez az API kulcs minden weboldaon használható. Viszont be lehet állítani az engedélyezett domaineket az Edit allowed referers... . Az esetleges visszaéléseket ezzel könnyedén meg tudjuk szüntetni.

 



Google Maps API Betöltése, beépítés az oldalba

Mivel igaz a mondás, hogy néhány sor példakód többet ér, mint pár oldal leírás, ezért nézzünk is egy példát a google maps API betöltésére:

<h1>Geo-teszt</h1>

	<script type="text/javascript">
		function initialize() {
			var mapOptions = {
				center: new google.maps.LatLng(47.902518, 20.377136),
				zoom: 16,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			var map = new google.maps.Map(
					document.getElementById("gmap_canvas"),
					mapOptions
			);
		}
		$(function() {
			initialize();
		});

    </script>

	<div id="gmap_canvas" style="width:200px; height: 200px;"></div>


Online Demo

A fent látható példa gyakorlatilag egy „Hello World" google maps alkalmazás. Betöltjük a térképet Eger, Dobó István tér koordinátáival.

Lépésekre bontva a folyamat:

  1. Betöltjük a Google Maps Javascrip API v3 –at egy script taggel.
    https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE
  2. Készítünk egy div-et ami tartalmazza majd a térképet. ennek id-je „gmap_canvas"
  3. Írunk egy függvényt (function initialize()) ami létre fogja hozni a térképet az API-t felhasználva.
  4. Létrehozunk egy JS Object literált (var mapOptions) ami tartalmazza a térkép beállításait.
  5. A létrehozott beállításokat tartalmazó változót átadjuk a google maps API - Map() metódusnak, és megmondjuk mely DOM elem fogja tartalmazni a térképet.
  6. Document Onload eseményre meghívjuk az initialize metódust, ami elvégzi a fent említett pontokban a feladatokat.

Map beállítások, opciók

A google térképet egy JS Objektummal lehet beállítani. Ezt célszerű előre létrehozni. A fent említett példában látható módon. Megnézzük, hogy mik az alap beállítások és hogyan kell használni őket.

var mapOptions = {
				center: new google.maps.LatLng(47.902518, 20.377136),
				zoom: 16,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};

Térkép középpontjának meghatározása: szélesség és hosszúság koordinátákkal (LatLng)

A térkép középpontját meg kell határoznunk, ide fogja pozícionálni a nézetet, ez független a jelölőpontok koordinátáitól. Középpontot mindig meg kell határozni! Erre segítségünkre lehet az API LatLng objektuma, melynek használata értelem szerű. Első paraméter a szélesség, második a hosszúság.

center: new google.maps.LatLng(47.902518, 20.377136)

Nagyítás értékének beállítása (Zoom level)

A térképen beállíthatjuk, hogy milyen közeli nézetben legyenek láthatók az információk. A google maps a térképet négyzetrácsokra ossza fel, ezen rácsokat határozhatjuk meg, hogy mekkora felbontásban látszanak a térkép területén.
Az értéke egy 0-18ig terjedő szám lehet. A 0 a teljes nézet, ez esetben gyakorlatilag az egész világtérkép látszik. A 18as nagyítással pedig már házszám pontossággal láthatjuk a térképet. Ennek értéke tetszőleges és az esetektől függő, hogy mekkorára kell állítani. Például azt szeretnénk, hogy az egész ország látszódjon a térképen, vagy csak az adott utca. Fontos megjegyezni, hogy a nagyítás a középponthoz van viszonyítva, amit center –el állíthatunk be!

Térkép típus

Beállíthatjuk a térkép típusát. Jó lehet, ha autós térképről szeretnénk váltani domborzati térképre, vagy ezek kombinációi.

Lehetséges térkép típusok:

  • ROADMAP: Az alapértelmezett térkép.
  • SATELLITE: Műholdas térkép.
  • HYBRID: Az előző két típus kombinációja. Műholdas térkép utca és város név információkkal
  • TERRAIN: Domborzati térkép.

A térkép objektum

Az API által nyújtott Map nevű JS osztály reprezentálja a térképet. Egy adott példány meghatároz egy térképet. Lehet több példány is, ha több térképre van szükség egy oldalon. Létrehozáskor paraméterbe vár egy HTML konténert, ami majd tartalmazni fogja a térképet, ez egy DOM elem, ami tipikusan egy div szokott lenni. Valamint vár egy natív objektumot, ami a beállításokat tartalmazza.

var map = new google.maps.Map(
					document.getElementById("gmap_canvas"),
					mapOptions
			);

 

Szerző: tomizej

címkék
Címkék: javascript,

Hozzászólások

Hozzászóláshoz be kell jelentkezni!

Keress minket Facebookon
Ajánlások