¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Google Maps - Marcadores

Ahora que ya sabemos lo más básico de un mapa de Google Maps, es hora de avanzar y ver los marcadores. Los marcadores son la forma ideal de mostrar al usuario puntos de interés en un mapa. En este artículo os mostraré cómo usarlos e insertarlos.

Si aun no comprendes muy bien cómo se crea un mapa o las opciones que tienes a la hora de crearlo, te recomiendo encarecidamente que leas nuestro artículo anterior sobre este tema.

Creando un marcador

Para crear un marcador, nos tenemos que valer del objeto marker. Este objeto recibe un único argumento de opciones. Este argumento es un objeto literal que puede tener varias propiedades de las cuales tan solo dos son obligatorias:

  • map
    Map es una referencia al mapa al que queramos añadir el mapa. Es la variable que almacenamos cuando creamos el mapa.
  • position
    Esta propiedad establece la posición del marcador y es del tipo google.maps.LatLng.

Sin duda, hay muchas más opciones que se encuentran detalladas en la documentación del API de Google Maps (en inglés).

Vamos a crear un mapa, añadiendo un simple marcador sin ninguna opción más que la necesaria.

var sevilla = new google.maps.LatLng(37.38264, -5.996295);  
var opciones = {  
  zoom: 7,
  center: sevilla,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var div = document.getElementById('mapa');  
var map = new google.maps.Map(div, opciones); // Creamos un marcador y lo posicionamos en el mapa  
var marcador = new google.maps.Marker({  
  position: new google.maps.LatLng(34.404, 6.008),
  map: map
});

Este código creará un mapa y le añadirá el marcador al mapa. El marcador queda inmediatamente añadido al mapa después de crearlo. Fácil, ¿no?

Añadir tooltip

En la mayoría de las ocasiones, querremos añadir un tooltip al marcador de manera que cuando un usuario pase el ratón sobre el marcador, aparezca algo de información sobre este. Hacerlo es tan fácil como añadir una propiedad title al objeto de opciones del marcador.

var marcador = new google.maps.Marker({  
  position: new google.maps.LatLng(34.404, 6.008),
  map: map,
  title: 'Que lugar es este?'
});

Cambiar el icono por defecto

Otra de las tareas más comunes, especialmente si vamos a añadir varios marcadores, es la de cambiar el marcador por uno que sea de nuestro gusto. A la hora de crear un marcador (y en cualquier momento) podemos especificar una URL (absoluta o relativa) en la propiedad icon del objeto de propiedades del marcador.

Cuando hice BuSeViCi, me topé con esta gran herramienta creada por Nicolas Mollet, que recoge gran cantidad de marcadores personalizados y la colección crece poco a poco. Para mi gusto, la única pega, es que no tiene marcadores en mayores resoluciones.

Veamos cómo crear un marcador con un icono personalizado:

var marcador = new google.maps.Marker({  
  position: new google.maps.LatLng(34.404, 6.008),
  map: map,
  title: 'Que lugar es este?',
  icon: 'http://google-maps-icons.googlecode.com/files/administration.png'
});

Otras propiedades interesantes

Antes de mostraros más propiedades, me gustaría decir que el marcador puede contener cualquier propiedad. Por ejemplo, podríamos añadir una propiedad llamada calle cuyo valor fuera “Ebro 14″. Luego podríamos hacer uso de esta propiedad si vamos a trabajar con el marcador.

  • animation
    Establece la animación que veremos al añadir el marcador al mapa. Puede ser BOUNCE, y el marcador se quedará botando hasta que lo paremos de manera interna, o DROP, que hará que el marcador caiga desde arriba y rebote brevemente sobre el mapa.
  • visible
    Esta propiedad establece la visibilidad de un marcador. Es de tipo booleano.
  • cursor
    Esta propiedad establece el cursor cuando este pasa por encima del marcador.

Ajustando el nivel de zoom en función de los marcadores

Si nuestra función es añadir varios marcadores a un mapa, a no ser que hayamos especificado una propiedad zoom en el mapa muy baja, nos encontraremos con que los marcadores que hemos añadido, no quedan a la vista del usuario.

Normalmente es buena idea que el usuario se de cuenta de que hay marcadores en el mapa que puede utilizar. Vamos a ver, brevemente, cómo lograrlo. No obstante, si tan solo vas a usar un único marcador no es recomendable usar este método ya que hará zoom al máximo sobre el marcador una vez añadido.

var limites = new google.maps.LatLngBounds();  
for (var i = 0; i < misMarcadores.lenght; i++) { // Aquí creamos el marcador  
  var marcador = new google.maps.Marker({
    position: new google.maps.LatLng(misMarcadores[i].lat, misMarcadores[i].lng),
    map: mapa
  });
  marcadores.push(marcador) 
  // Extendemos el objeto LatLngBound 
  limites.extend(marcador.position);
}
mapa.fitBounds(limites);  

Lo que hacemos es crear un objeto de límites (bounds) y conforme vamos añadiendo marcadores, extendemos los límites para que cubra la posición del nuevo marcador que hemos añadido.

Para que el mapa se mueva, tenemos que llamar al método fitBounds sobre el objeto del mapa.

He preparado una sencilla demo que muestra la esencia de lo que hemos visto aquí.

En el próximo artículo veremos cómo mejorar ese tooltip con una ventana de información.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!