Webstack
Bejelentkezés

Elfelejtetted a jelszavad?

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

Google Maps Javascript API – Egyedi jelölőpontok

Google Developers | tomizej  | 2013-03-29 01:02:10

A térképes alkalmazások és egyszerűbb térképek megjelenítésénél elengedhetetlen a jelölőpontok megjelenítése, amivel az általunk megjelölt helyeket szeretnénk feltüntetni.
Az előző cikkünkben a Google Maps Javascript API -ban a google maps API alapjaival, telepítésével, használatával foglalkoztunk. Ebben a cikkben bemutatjuk, hogyan lehet egyszerűen egyedi jelölőpontokat készíteni. De első körben megnézzük, hogyan használhatjuk őket.

 

Jelölőpontok

Egy jelölőpont meghatároz egy adott helyet a térképen. A google alapértelmezett ikonja a már jól ismert piros színű jelölő, ami lecserélhető egyedi ikonra is!


Az alábbi példában létrehozunk egy jelölőikont, majd átadjuk a térképnek.

function initialize() {
	var LatLong = new google.maps.LatLng(47.902518, 20.377136);
	var mapOptions = {
		center: LatLong,
		zoom: 16,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(
			document.getElementById("gmap_canvas"),
			mapOptions
			);

	var marker = new google.maps.Marker({
		position: LatLong,
		map: map,
		title: "Ez itt a jelölőpontom!"
	});
}

window.onload = function() {
	initialize();
};

Kattintis ide a példakód kipróbálásához.

 

A google.maps.Marker() konstruktor létrehoz egy marker objektumot. Hasonlóan, mint a Map objektum, ő is vár egy Objektum literált a beállításokkal. A kötelező paraméterek a következők:

  • position – (kötelező), a jelölőpont pozícióját (koordinátáját határozza meg) LatLng objektum kell, hogy legyen.
  • map (opcionális) Map objektum, amire rá kell helyezni a jelölőpontot
  • title (opcionális) Hasonlóan, mint a html title attribútum, egér rávitelkor tooltip lehetőség.

Fontos, hogy a marker opciókban meghatározzuk a térkép objektumot, amire rá szeretnénk helyezni a jelölőpontot. Ha nem tesszük meg, a jelölőpont ugyan létrejön, de nem lesz hozzárendelve egyetlen térképhez sem. Komplexebb alkalmazásoknál késöbb a setMap() metódussal hozzá lehet rendelni az ikonokat a térképhez, létrehozásuk után is.

 

Egyedi jelölőpontok

A felhasználói élmény növelése érdekében a Google Maps JS Api lehetőséget nyújt, hogy a megszokott jelölő ikonokat lecseréljük saját magunk által rajzoltakra.


Miért jó az, ha egyedi jelölőpontok vannak a térképen? Nézzünk néhány népszerű esetet:

  1. A térképen egy kapcsolat felvételi formon szeretnénk, hogy a jelölőpont a saját cégünk logója legyen
  2. Meg szeretnénk jeleníteni a környékben található WIFI csatlakozási pontokat, egy wifi kapcsolatot ábrázoló ikonnal.
  3. A térképen szeretnénk megjeleníteni a közeli szabadidő lehetőségeket. Mindegyik lehetőség külön-külön egyedi ikonnal. (Az ital bárok, pl.: egy pohárral, a stadion egy focilabdával...stb.)

Kétféle ikonkezelései módszert különböztethetünk, meg: egyszerű és komplex.

 

Egyszerű ikonok

Ebben az esetben egyetlen, általunk meghatározott képpel lecserélhetjük az alapértelmezett ikont. Érdemes PNG, vagy GIF formátumot használni és az árnyékolást a képen megoldani.
A cserét nagyon gyorsan megtehetjük, ha a Marker objektumnak az icon propertyjében megadjuk a kép urj-ét.


Lásd az alábbi példában:

 

//Marker létrehozása
var image = 'bar.png';
var marker = new google.maps.Marker({
	position: LatLong,
	map: map,
	title: "Söröző",
	icon : image
});

Kattintis ide a példakód kipróbálásához.

 

Komplex ikonok

A komplex ikonok több lehetőséget nyújtanak. Meghatározni az általunk definiált ikon kattintható területét koordinátákkal. Különválaszthatjuk az árnyékot a képtől, megadhatunk rétegződési szintet is, hogy melyik jelölőpont helyezkedjen előrébb, mint a másik (z-index).


Árnyékot első sorban animációk miatt érdemes külön meghatározni, amivel gyakorlatilag az árnyék vetülése befolyásolható az APIval különféle elmozdítások esetén, a realisztikus hatás érdekében. Az árnyékot 45°-os szögben kell megrajzolni és a bal alsó sarkot a fő kép bal alsó sarkához kell igazítani. A Marker objektumnak shadow propertyjében adható meg az elérési útja, úgy ahogy az icon propertynél is.

 

Ikon létrehozása

Az ikon megrajzolása / beszerzése után lennie kell 2 külön képünknek, az ikonnak és az árnyéknak.

 

 

Az ikon objektummal megadhatjuk a jelölő ikon középpontját (origin), ami abban az esetben hasznos, ha több ikont használunk a térképen és csak egyetlen ikon sprite képet szeretnénk betölteni. Ezen felül még beállíthatjuk a referencia pontot is, ami a kép azon pontját határozza meg, ami a térkép adott koordinátapontjához fog illeszkedni. Egyszerűsítve pl.: Egy zászló ikonnál a referencia pont a zászlórúd alsó pontja kell, hogy legyen.

 

A Marker objektum image, shadow propertijének átadhatunk egy objektum literált amiben definiáljuk a képet és az árnyékot.

 

//Ikon kép
var image = {
	url: 'webstack-marker.png',
	//Főkép mérete
	size: new google.maps.Size(69, 107),
	//Főkép középpontja
	origin: new google.maps.Point(0, 0),
	//Referencia pont (Kép alsó középpontja)
	anchor: new google.maps.Point(35, 107)
}
//Ikon árnyék
var shadow = {
	url: 'websatck-marker-shadow.png',
	//Árnyék mérete
	size: new google.maps.Size(110, 107),
	//Főkép középpontja
	origin: new google.maps.Point(0, 0),
	//Referencia pont (Árnyék alsó középpontja)
	anchor: new google.maps.Point(35, 107)
}

 

A méret és pontok meghatározására a google.maps.Size és google.maps.Point objektumot használjuk. Használatuk értelem szerű. A Size esetében első paraméter a szélesség, második a magasság. A Point esetében első paraméter x, második y koordináta.

 

Aktív (kattintható) terület meghatározás

Bonyolultabb formáknál hasznos, hogy csak kizárólag arra a területre lehet kattintani, ami ténylegesen maga az ikon, nem pedig az egész képre. A shape propertyben meghatározhatunk aktív kattintható területet. Gyakorlatilag ez egy HTML <area> elemet definiál, ami lehet poligon, ellipszis, négyzet. X,Y koordinátákat meghatározzuk és létrehozzuk a poligont, vagy ellipszist... attól függően milyen alakzatról van szó. Az alábbi példában a demo linken található alakzat területe látható:

var shape = {
	coord: [2, 2, 2, 65,
		20, 65, 35, 100,
		42, 65, 62, 65, 62, 2
	],
	type: 'poly'
};

A polygon a következőképp néz ki az ikonon:

 

Végeredmény (Összerendelés a térképpel)

Végül, ha minden opciót megadtunk a térkép objektumot kibővítjük az opcionális propertykkel:

//Marker létrehozása
var marker = new google.maps.Marker({
	position: LatLong,
	map: map,
	title: "Söröző",
	icon: image,
	shadow: shadow,
	shape: shape
});

Az online demo megtekinthető itt:

 

Online Demo

 

Szerző: tomizej

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

Hozzászólások

Hozzászóláshoz be kell jelentkezni!

Keress minket Facebookon
Ajánlások