Szükségünk lesz a Google Maps API elérésére, melyet a megfelelő szkript betöltésével érhetünk el. Az itt ismertetett megoldáshoz nincsen szükség Google Maps API kulcsra. A térkép felületének nyelvét a language paraméter beállításával tudjuk szabályozni.

1

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=GOOGLE_API_KEY"></script>

Ezen kívül szükségünk lesz még egy ID tulajdonsággal rendelkező HTML elemre, amibe a Google Maps a térképet tölti majd. A térkép megjelenítését egy kis JavaScript kódolással érhetjük el.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var latlongs = new google.maps.LatLng (47.123456, 18.123456);
 
var map = new google.maps.Map (document.getElementById ('contact_map'), {
	zoom: 15,
	center: latlongs,
	mapTypeId: google.maps.MapTypeId.ROADMAP
});
 
var map_icon = new google.maps.MarkerImage (
	'images/map_logo.png',
	new google.maps.Size (50, 50),
	new google.maps.Point (0,0),
	new google.maps.Point (16, 46)
);
 
new google.maps.Marker ({
	position: latlongs,
	map: map,
	title: 'Jelölő szövege',
	icon: map_icon
});

Az első sorban adjuk meg, hol helyezkedik el a megjelölni kívánt pont a Google Maps térképén. Ezután létrehozzuk a térképet, mely a megadott paramétereknek megfelelően fog megjelenni:

• azon HTML elem azonosítója, melybe a térképet töltjük (contact_map)
• a nagyítás mértéke (zoom), értéke 0 – 19 közötti lehet, ahol 0 a feljes Földgömböt jelenti
• középpont (latlongs): ez az első sorban létrehozott változó, ez határozza meg a megjelenítendő terület középpontját
• a térkép típusa, ahol a következő lehetőségek állnak rendelkezésünkre:
  • MapTypeId.ROADMAP: úthálózat megjelenítése (ez az alapértelmezett)
  • MapTypeId.SATELLITE: a Google Earth műholdképes megjelenítése
  • MapTypeId.HYBRID: hibrid mód, az előbbi kettő keveréke, a műholdképre rajzolja rá az egyéb kiegészítő adatokat
  • MapTypeId.TERRAIN: terepviszonyokat megjelenítő mód

Miután térképünk már van, a map_icon változóba létrehozunk egy képet, melyre a jelölő készítésekor lesz szükségünk: ez a kép fog megjelenni a térképen a megadott pontban. A kép létrehozásakor megadott paraméterek sorban:

• a kép elérési útja
• a képből használandó részlet mérete
• a képből használandó rész kezdőpontja
• a kiválasztott képrészlet azon pontja, mely pontosan illeszkedik majd a megadott helyre. Például, ha egy zászlót használunk képként, a zászlórúd aljának koordinátáit lehet érdemes megadni

Utolsó lépésként egy új jelölő létrehozásával elhelyezzük az előbb összeállított képet a korábban létrehozott Google Maps térképünkkel. A jelölő ikon létrehozásakor megadott beállítások:

• position: az első lépésben létrehozott GPS koordinátára mutató pont. Korábban ezt használtuk térképünk középpontjaként is. Ha a jelölőt nem a térkép közepére szeretnénk elhelyezni, az első lépésben foglaltakkal megegyezően egy másik pontot is létrehozhatunk, így egyik a térkép közepét, másik a jelölő helyét adja majd meg. Ebben az esetben célszerű figyelnünk a nagyítás (zoom) megfelelő beállítására, hogy a jelölő a térkép által megjelenített területen helyezkedjen el
• map: a térképet azonosító JavaScript változó, amelyre a jelölőt elhelyezzük
• title: tetszőleges szöveg, mely akkor jelenik meg, ha az egérmutatóval az ikon felett időzünk a térképen
• icon: a korábban létrehozott kép/ikon