El rincon del krilbert

Wow! ya vamos en la tercer entrega ¿qué es lo que vamos a hacer ahora? vamos a poner marcadores en nuestro mapa, vamos a personalizar los iconos de los marcadores y por si fuera poco vamos a desplegar una ventana emergente con información cuando hagamos click en el marcador.

Les recuerdo que no he tenido retroalimentación de como me estoy desenvolviendo en estos tutoriales ehh asi que despues no se quejen!

Oks vamos a poner nuestro primer marcador lo que vamos a hacer es crear un objeto del tipo GMarker y despues le vamos a decir que lo ponga en el mapa... ¿tan sencillo? claro!

Para este ejemplo vamos a poner el centro del mapa y un marcador en la Torre Eiffel. Nuestro código quedaría así:

Code:

Como con el setCenter no deberias tener ningún problema si seguiste la Entrega #2 de mis posts no lo veremos .

Oks, como pueden ver lo que hicimos es crear un objeto del tipo GMarker pasandole las coordenadas donde queremos el marcador y eso queda en la variable M_torreEiffel, y despues con la función addOverlay le decimos que la "imprima" en el objeto de tipo mapa que le especificamos, en este caso map.

Esto es lo que veremos


Ya pusimos nuestro tipico marcador de Google Maps pero... al crear un marcador le podemos pasar otro parametro... un icono sip, podemos personalizar nuestros iconos creando un objeto icono.


Personalizando nuestros marcadores

Para crear un icono necesitamos crear un objeto GIcon, veamos algunas de sus propiedades:

image (cadena): Aqui especificamos la imagen del icono.
shadow (cadena): Aqui especificamos la imagen de la sombre del icono.
iconSize (GSize): El tamaño del icono como objeto GSize.
shadowSize (GSize): El tamaño del icono de sombra como objeto Gsize.
iconAnchor (GPoint): Aqui van las coordenadas del icono (0,0 es hasta arriba hasta la izquierda) donde "apuntara" en el mapa.
infoWindowAnchor (GPoint): Aqui van las coordenadas del icono (0,0 es hasta arriba hasta la izquierda) donde "apuntara" las ventanas que aparecen cuando le das click en el marcador.

Con estos tenemos por ahora , veamos un ejemplo, utilizaremos este marcador que hice en photoshop:


Code:

Como podemos ver, creamos un objeto GIcon y le especificamos sus propiedades. En image escribimos el url del marcador que queramos que aparezca como icono y en iconsize establecemos el tamaño (yo puse 30,30 porque es el tamaño real de la imagen), iconAnchor es el punto de anclaje donde se va a poner el icono en el mapa (es el punto verde en la siguiente imagen), e infoWindowAnchor es el punto de anclaje para las ventanas emergentes (punto rojo en la siguiente imagen). No coman ansias ahorita veremos como poner estas ventanas emergentes.

Para que pongan los iconos de sombra se los dejo de tarea pero es practicamente igual que la propiedad image e iconSize, no creo que tengan problemas

Ventanas emergentes al hacer click en el marcador
Ya vamos a poner eventos y vamos con el mas facilito, un click en el marcador y que habra una ventana con texto. Esto lo conseguimos con GEvent.addListener. El codigo sería:

Code:

Creo que el ejemplo es muy sencillo y fácil de entender, a GEvent.addListener le decimos que al hacer click en el marcador M_torreEiffel haga lo que esta dentro de function(){}, y dentro de function le decimos al marcador que abra una ventana emergente mostrando el texto Torre Eiffel, esto lo hacemos con openInfoWindowHTml

¿porque con la función openInfoWindowHtml?

Porque esta función nos permite poner código HTML dentro de la ventana ahi ya se los dejo de tarea para que practiquen y pongan texto con estilo, imagenes, etc...

Solo una recomendación, si van a poner imagenes tienen que asegurarse de poner su tamaño con width y height para que el browser pueda "pintarlo" correctamente.


Nuestro ejemplo al final quedo así:



Weno... ya para finalizar les dejo el codigo completo del javascript. Si tienes alguna duda y no has visto las primeras entregas pues... primero echales un ojo

Code: