Code
Code
Code

TekMap

Objetivo: 

Crear un plugin para simplificar la integración mapas de googlemaps (r) con la API V3. El plugin debe devolver el objeto jQuery y debe aplicar los mapas a todos los elementos que se hayan seleccionado. ¿Por qué la versión 3? Sencillo la versión 2 está obsoleta y google le ha dejado de dar soporte. 

El plugin:

Llamada básica:

$ ("# Map"). TekMap ();

no es muy útil pero crea un mapa centrado. Pero podemos hacer cosas más interesantes como añadir marcadores.

$(“#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" }]
 }
)

Con este ejemplo ya hacemos algo más, elegimos el centro del mapa con los parámetros lat y lng, especificamos las opciones del mapa con el mapoptions (se pueden poner cualquiera de las opciones permitidas por google). Y añadimos un marcador con la opción markers.

Parámetros por map:

lat: (float) latitud del centro del mapa.

lng: (float) longitud del centro del mapa.

click: (function) callback que se llamará cuando se clique el mapa.

mapoptions: (object) parámetros de configuración de googlemaps [info].

markers: (array) array de marcadores (puntos que aparecen en pantalla)

 

Añadir marcadores una vez creado el mapa:

$ ("# Map"). TekMarker ((lat: 42.2, lng: 3.2, draggable: false, infowindow: "Hello"));

o

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

 

Parámetros del TekMarker

lat: (float) latitud del marcador

lng: (float) longitud del marcador

draggable: (booleano) indica si el marcador se puede arrastrar o no.

drag: (function) callback que ejecutará al finalizar de arrastrar.

infowindow: (string) mensaje que se mostró al clicar el marcador.

icon: (string) url del icono. Se puede indicar un objeto en substitución.

shadow: (string) url del icono. Se puede indicar un objeto en substitución.

addres :  (string)  dirección donde se ubicarà el marcador

Los objetos icon y shadow:

url: (string) url del icono

size: [ancho, alto] el tamaño de la imagen en pixels.

base: [x, y] donde comienza la imagen

origin: [x, y] Punto que hace de ancla de la imagen.

Ejemplos:

Ejemplo 1
Ejemplo 2
Ejemplo 3
Ejemplo 4
Ejemplo 5 (Iconos con sombreado a partir de tekmap 0.5)

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