• Taller Argenmap 2013 /
• Trabajando con marcadores y capas KML /
• Agregar un marcador personalizado

2.2. Agregar un marcador personalizado al mapa

Los marcadores personalizados se configuran pasándole un parámetro a la funcionagregarMarcador().

La función acepta como parámetro un objeto javascript agregarMarcador({ ... }).

El objeto puede tener las siguientes propiedades:

{
  lat: ...,
  lng: ...,
  nombre: ...,
  contenido: ...,
  icono: ...,
}

2.2.1 Descripción de las propiedades de un marcador

lat

Opcional. La latitud en grados con notación decimal.

lng

Opcional. La longitud en grados con notación decimal.

nombre

Obligatorio. Un identificador para el marcador. Es importante ponerle un nombre ya que este nombre lo identifica para otras acciones programáticas como por ejemplo, el uso de los métodos quitarMarcador() o modificarMarcador() que reciben como parámetro, el nombre del marcador a afectar.

contenido

Opcional. Este texto es el que se desplegará al hacer click sobre el marcador para que el usuario del mapa reciba mayor información acerca de lo que representa el marcador.
Este texto puede ser HTML.

icono

Opcional. La URL de una imagen que ya esté online. Esta imagen va a ser el ícono que represente al marcador sobre el mapa.

Ejemplo funcional 1

var marcador = {
  lat: -32.5,
  lng: -58.5,
  nombre: 'Mi marcador de prueba',
  contenido: 'Hola Mundo!',
  icono: 'https://cdn3.iconfinder.com/data/icons/fatcow/32/flag_red.png'
};
$('#mapa').agregarMarcador( marcador );

Es importante recordar cuáles de las propiedades del marcador son obligatorias y cuáles opcionales para asegurar que se vea el marcador.

Ejercicio 1

Vamos a generar un marcador sobre el mapa.

• Hacé click en el botón “Javascript”.

• Copiá el texto del Ejemplo Funcional 1 y pegalo en el editor en la sección Javascript debajo de la línea que dice ("#mapa").argenmap().centro(-31,-59).zoom(6);.

• Mirá el resultado en el panel de la derecha. El mapa muestra un marcador con una banderita roja sobre la coordenada 31ºS 59ºO.

JS Bin

Ejercicio 2

Ahora vamos a hacer un marcador sobre el mapa, pero simplificando las líneas de código.

Es decir, en lugar de crear un objeto en una variable marcador como en el ejercicio anterior, vamos a pasarle a agregarMarcador() la definición del marcador directamente a la función.

Ejemplo funcional 2

$('#mapa').agregarMarcador({
  lat: -32.5,
  lng: -58.5,
  nombre: 'Mi segundo marcador',
  contenido: 'Hola de nuevo!!',
  icono: 'https://cdn2.iconfinder.com/data/icons/officeicons/PNG/48/Flag.png'
});

• Hacé click en el botón “Javascript”.

• Copiá el texto del Ejemplo Funcional 2 y pegalo en el editor en la sección Javascript debajo de la línea que dice ("#mapa").argenmap().centro(-31,-59).zoom(6);.

• Mirá el resultado en el panel de la derecha.

JS Bin

Ejercicio 3

Ya que argenmap.jquery es un plugin de jQuery, podemos hacer todo lo que aprendimos hasta ahora en una sóla línea de código. Quedará desprolija pero en este ejercicio vamos a probar esto.

Ejemplo funcional 3

$('#mapa').argenmap().centro(-34.5721, -58.4399).zoom(15).agregarMarcador({ contenido:'Éste es el IGN' });

• Hacé click en el botón “Javascript”.

• Copiá el texto del Ejemplo Funcional 3 y pegalo en el editor en la sección Javascript dentro de la función que recibe .ready() como parámetro.

• Mirá el resultado en el panel de la derecha.

JS Bin

---

Ahora que dominamos el manejo de marcadores, pasamos a ver cómo podemos Superponer un archivo KML sobre el mapa.