Como maquear nuestros marcadores a gusto y antojo.
Lo primero que vamos a hacer es, o bien buscar una colección de iconos que nos guste, o sino crear nuestros iconos. Como somos así de molones lo creamos.
Un icono en PNG de 40 pixeles de ancho por 60 pixeles de alto.
Vale, no es lo mejor que he visto pero nos sirve :p.
De esta imagen entendemos que tiene un tamaño de 40×60 px, el centro inferior de la imagen lo encontramos en (20,60) y usamos un PNG para el tema de las transparencias.
Una vez tenemos el icono, vamos a crear el objeto imagen para nuestro marcador.
|
1 2 3 4 5 6 7 |
var image = { url: 'img/icon40x60.png', //ruta de la imagen size: new google.maps.Size(40, 60), //tamaño de la imagen origin: new google.maps.Point(0,0), //origen de la iamgen //el ancla de la imagen, el punto donde esta marcando, en nuestro caso el centro inferior. anchor: new google.maps.Point(20, 60) }; |
Una vez definida la imagen, ya podemos usarla como marcador, simplemente añadimos a nuestro marcador una opción más, ‘icon’, y como parámetro le pasamos el identificador de nuestra imagen.
|
1 2 3 4 5 6 7 8 9 10 |
var marcador = new google.maps.Marker({ position: new google.maps.LatLng(lat,lng), map: map, title: cadena, animation: google.maps.Animation.DROP, identificador: numero, draggable: true, icon : image }); |
Sprites de marcadores.
Seguro que alguna vez, buscando iconos o imágenes, habéis topado con algún sprite.
Y bien, ¿qué es un sprite? Son una serie de imágenes en un único archivo, y ¿para que me sirven? Pues para utilizar en una misma imagen los recursos que necesitemos sin tener que estar cargando muchas imágenes pequeñas (explicación cutre :p).
Esto es un sprite:
Aquí vemos como está formado de una manera grafica
En este caso el sprite está formado por 10 imágenes de 50×60 pixeles unidas en línea.
Veamos cómo podemos aprovechar los sprites para poner varios tipos de iconos en nuestro mapa. Hagamos un mapa en el que cada vez que se haga clic y se ponga un marcador, éste salga con el número correspondiente; si se pasa de 9 marcadores, se borran todos y se empieza desde 0.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
function gernera_marcador(lat,lng,numero) { if(numero > 9) { //recorremos array para borrar todos los marcadores for(a in array_marcadores) { array_marcadores[a].setMap(null); //borramos el marcador del mapa } array_marcadores = []; //borramos todo nuestro array contador = 0; //ponemos el contador general a 0 numero = 0; //ponemos el numero que le hemos passado ( en este caso seria el 10 ) a 0 } //miramos el icono a usar var img1 = { url:'imagenes a usar/7/sprites.png', size:new google.maps.Size(50, 60), // ancho,alto origin: new google.maps.Point(numero*50,0), //origen anchor: new google.maps.Point(25,60) // } var cadena="soy el marcador nº "; cadena+=numero; var marcador = new google.maps.Marker({ position: new google.maps.LatLng(lat,lng), map: map, title: cadena, animation: google.maps.Animation.DROP, identificador: numero, draggable: true, icon : img1 }); //apilamos marcador array_marcadores.push(marcador); //añadimos evento click en el marcador google.maps.event.addListener(marcador, 'click', function() { for(var a=0;a<array_marcadores.length;a++) { if(array_marcadores[a]['identificador'] == this.identificador) { array_marcadores[a].setMap(null); //borramos el marcador del mapa array_marcadores.splice(a, 1); //borramos el marcador de nuestro array } } }); } |
Veamos primero como calculamos la imagen que le tocará al icono
|
1 2 3 4 5 6 |
var img1 = { url:'imagenes a usar/7/sprites.png', size:new google.maps.Size(50, 60), // ancho,alto origin: new google.maps.Point(numero*50,0), //origen anchor: new google.maps.Point(25,60) //ancla } |
Vemos que la imagen la definimos con un ancho de 50 y un alto de 60:
size:new google.maps.Size(50, 60),
El origen de la imagen lo definimos con el número de icono multiplicado por el ancho de cada icono con la altura 0.
El 4 icono tendrá el origen en 3*50 = 150,0 (ponemos 3, porqué recordemos que empezamos con el numero 0).
El ancla (el punto que marcará las coordenadas), la definimos con la mitad del ancho (50/2 = 25), y la altura (60).
Así, dependiendo del número que le pasemos al marcador, nos seleccionará un icono u otro.
Veamos como ponemos los iconos a 0 una vez que hemos recorrido todo el sprite.
|
1 2 3 4 5 6 7 8 9 10 |
if(numero > 9) { for(a in array_marcadores) { array_marcadores[a].setMap(null); } array_marcadores = []; contador = 0; numero = 0; } |
Si el número (que pasamos como parámetro a la función) es mayor que 9:
- Recorremos el array borrando los puntos del mapa.
- Vaciamos el array_marcadores.
- Contador general del programa a 0.
- Convertimos el número que hemos recibido (10) en un 0.
Así se procesará como el marcador nº 0.
Otra cosita sobre los marcadores, así con el próximo artículo vamos a por algo más interesante.
Las infoWindows.
Las InfoWindows son los típicos bocadillos con información que podemos poner en los marcadores de un mapa.
La estructura de una InfoWindows:
|
1 2 3 4 5 6 7 |
contenido = “<h1>Esto es una InfoWindow</h1>”+ “<h2>Se puede usar etiquetas html</h2>”+ “ : ) “; var infowindow = new google.maps.InfoWindow({ content: contenido }); |
Y para lanzarla, añadimos el evento onclick al marcador :
|
1 2 3 4 |
google.maps.event.addListener(marcador, 'click', function() { infowindow.open(map,marcador); }); |
Hay que comentar que, aparte de otros parámetros, uno de los más importantes que podemos usar es maxWidth, que será el ancho máximo de nuestra infoWindow.
|
1 2 3 4 |
var infowindow = new google.maps.InfoWindow({ content: contenido, maxWidth:250 }); |
* El infoWindow puede contener imágenes, enlaces y cualquier elemento de una web. Incluso se puede estilar con CSS.
Ejemplo con los sprites y las infoWindows.
Si hay algo que no quede suficientemente claro o tenéis otra manera de hacerlo… ¡comentad! 😉
