Code
Code
Code

TekMap

Objectiu :

Crear un plugin per simplificar la integració mapes de googlemaps(r) amb la API V3. El plugin  ha de retornar l’ojecte jquery i ha d’aplicar els mapes a tots els elements seleccionats.  Per què la versió 3?  Senzill la 2 està obsoleta i google hi ha deixat de donar-hi suport.

El plugin :

Crida bàsica:

$(“#map”).TekMap();

no és gaire útil però crea un mapa centrat. Però podem fer coses més interesants com ara afegir marcadors.

$(“#map”).TekMap({
       lat: 42.2,
    lng: 3.2,
    mapoptions : {
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false
        },
    markers : [{    lat: 42.2, lng: 3.2,  draggable:false, infowindow:"Hello" }]
 }
)

Amb aquest exemple ja fem alguna cosa més, escollim el centre del mapa amb els paràmetres lat i lng, especifiquem les opcions del mapa amb el mapoptions (es poden posar qualsevol de les opcions permeses per google). I afegim un marcador amb l’opció markers.

Parametres per map :

lat : (float) latitud del centre del mapa.

lng : (float) longitud del centre del mapa.

click : (function) callback que es cridarà quan es clicki el map.

mapoptions : (object) parametres de configuració de googlemaps [info].

markers : (array) array de marcadors (punts que apareixen en pantalla)

 

Afegir marcadors un cop creat el mapa:

$(“#map”).TekMarker({ lat: 42.2, lng: 3.2, draggable:false, infowindow:"Hello" });

o

$("#map").TekMarker({addres:"Girona"});   //  utilitzant el servei geocode

Parametres del TekMarker

lat : (float)  latitud del marcador

lng: (float)  longitud del marcador

draggable: (booleà) indica si el marcador es pot arrosegar o no.

drag: (function) callback que executarà al finalitzar d’arrosegar.

infowindow : (string)  missatge que es mostrà al clicar el marcador.

icon : (string) url de la icona  És pot indicar un objecte en substitució. 

Shadow: (string) url de la icona  És pot indicar un objecte en substitució.

addres :  (string)  adreça on s'ubicarà el marcador

Els objectes icon  i shadow :

url : (string) url de la icona

size : [ample,alt] la mida de la imatge en pixels.

base : [x,y] on comença la imatge

origin : [x,y] Punt que fa d'ancla de la imatge.

 

Exemples :

Exemple 1
Exemple 2
Exemple 3
Exemple 4
Exemple 5 (icones amb ombra a partir de tekmap 0.5)

comments powered by Disqus
Comunicatek - - La Bisbal d’Empordà - dani@comunicatek.com - Sobre code - Nota legal