Introducción

Un marcador identifica una ubicación en un mapa. De forma predeterminada, un marcador usa una imagen estándar. Los marcadores pueden mostrar imágenes personalizadas, en cuyo caso normalmente se denominan «iconos». Los marcadores y los iconos son objetos de tipo Marker. Puede establecer un ícono personalizado dentro del constructor del marcador o llamando a setIcon() en el marcador. Obtenga más información sobre cómo personalizar la imagen del marcador a continuación.

En términos generales , los marcadores son un tipo de superposición. Para obtener información sobre otros tipos de superposición, consulte Dibujar en el mapa.

Los marcadores están diseñados para ser interactivos. Por ejemplo, de forma predeterminada reciben "click" eventos, por lo que puede agregar un detector de eventos para que aparezca una ventana de información que muestre información personalizada. Puede permitir que los usuarios muevan un marcador en el mapa configurando el marcador «s draggable propiedad a true. Para obtener más información acerca de los marcadores arrastrables, consulte a continuación.

Agregar un marcador

El constructor google.maps.Marker toma un solo Marker options literal de objeto, especificando las propiedades iniciales del marcador.

Los siguientes campos son particularmente importantes y comúnmente se establecen al construir un marcador:

• position (obligatorio) especifica un LatLng que identifica la ubicación inicial del marcador. Una forma de recuperar un LatLng es mediante el servicio de codificación geográfica.
• map (opcional) especifica el Map en el que colocar el marcador. Si no especifica el mapa en la construcción del marcador, el marcador se crea pero no se adjunta (ni se muestra) en el mapa. Puede agregar el marcador más tarde llamando al marcador «s setMap() método.

El siguiente ejemplo agrega un marcador simple a un mapa en Uluru, en el centro de Australia:

En el ejemplo anterior, el marcador es colocado en el mapa en la construcción del marcador usando la propiedad map en las opciones del marcador. Alternativamente, puede agregar el marcador al mapa directamente usando el marcador «s setMap() método, como se muestra en el siguiente ejemplo:

El marcador «s title aparecerá como información sobre herramientas.

Si no desea pasar ningún Marker options en el constructor del marcador, en su lugar, pase un objeto vacío {} en el último argumento del constructor.

Ver ejemplo

Eliminar un marcador

Para eliminar un marcador del mapa, llame al setMap() método que pasa null como argumento.

marker.setMap(null);

Tenga en cuenta que lo anterior El método no elimina el marcador. Elimina el marcador del mapa. Si, en cambio, desea eliminar el marcador, debe eliminarlo del mapa y luego establecer el marcador en null.

Si desea administrar un conjunto de marcadores, debe crear una matriz para contener los marcadores. Con esta matriz, puede llamar a setMap() en cada marcador de la matriz por turnos cuando necesite eliminar los marcadores. Puede eliminar los marcadores eliminándolos del mapa y luego configurando la matriz «s length en 0, lo que elimina todas las referencias al marcadores.

Ver ejemplo

Animar un marcador

Puede animar marcadores para que muestren un movimiento dinámico en una variedad de circunstancias diferentes. Para especificar la forma en que El marcador está animado, utilice la propiedad animation del marcador, de tipo google.maps.Animation. Se admiten los siguientes valores de Animation:

• DROP indica que el marcador debe caer desde la parte superior de el mapa a su ubicación final cuando se colocó por primera vez en el mapa. La animación cesará una vez que el marcador se detenga y animation volverá a null. Este tipo de animación generalmente se especifica durante la creación de Marker.
• BOUNCE indica que el marcador debe rebotar en sitio. Un marcador de rebote continuará rebotando hasta que su propiedad animation se establezca explícitamente en null.

Usted puede iniciar una animación en un marcador existente llamando a setAnimation() en el objeto Marker.

Si tiene muchos marcadores , es posible que no desee colocarlos en el mapa todos a la vez. Puede hacer uso de setTimeout() para espaciar sus animaciones de marcadores «usando un patrón como el que se muestra a continuación:

function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}

Ver ejemplo

Personalizar una imagen de marcador

Si desea mostrar una letra o un número en un marcador, puede utilizar una etiqueta de marcador.Si necesita una mayor personalización, puede definir un icono para mostrar en lugar de la imagen de marcador predeterminada. Definir un icono implica establecer una serie de propiedades que determinan el comportamiento visual del marcador.

Las secciones siguientes describen etiquetas de marcador, iconos simples, iconos complejos y símbolos (iconos vectoriales).

Etiquetas de marcador

Una etiqueta de marcador es una letra o número que aparece dentro de un marcador. La imagen del marcador en esta sección muestra una etiqueta de marcador con la letra «B». Puede especificar una etiqueta de marcador como una cadena o un objeto MarkerLabel que incluye una cadena y otras propiedades de etiqueta.

Al crear un marcador, puede especificar un label propiedad en el objeto MarkerOptions. De forma alternativa, puede llamar a setLabel() en el objeto Marker para establecer la etiqueta en un marcador existente.

El siguiente ejemplo muestra marcadores etiquetados cuando el usuario hace clic en el mapa. :

Iconos simples

En el caso más básico, un icono puede indicar una imagen para usar en lugar del icono de chincheta predeterminado de Google Maps. Para especificar un icono de este tipo, establezca la propiedad icon del marcador en la URL de una imagen. La API de JavaScript de Google Maps cambiará el tamaño del icono automáticamente.

Iconos complejos

Es posible que desee especificar formas complejas para indicar las regiones en las que se puede hacer clic y especificar cómo deben aparecer los iconos en relación con otras superposiciones (su «orden de pila»). Los iconos especificados de esta manera deben establecer su icon propiedades a un objeto de tipo Icon.

Icon definir objetos una imagen. También definen la size del icono, la origin del icono (si la imagen que quieres es parte de una imagen en un sprite, por ejemplo), y el anchor donde debe ubicarse el punto de acceso del ícono (que se basa en el origen).

Si están usando una etiqueta con un marcador personalizado, puede colocar la etiqueta con la propiedad labelOrigin en la objeto.

Convirtiendo MarkerImage objetos al tipo Icon

Hasta la versión 3.10 de la API de JavaScript de Maps, los iconos complejos se definían como objetos MarkerImage. El objeto Icon literal se agregó en la versión 3.10 y reemplaza a MarkerImage de la versión 3.11 en adelante. Icon los literales de objeto admiten los mismos parámetros que MarkerImage, lo que le permite convertir fácilmente un MarkerImage a un Icon eliminando el constructor, ajustando los parámetros anteriores en {} «s y agregando los nombres de cada parámetro. Por ejemplo:

se convierte en

Símbolos

Además de las imágenes rasterizadas, un marcador admite la visualización de rutas vectoriales llamadas Symbols . Para mostrar una ruta de vector, pase un objeto Symbol literal con la ruta deseada a la propiedad del marcador «s icon. Puede utilizar una de las rutas predefinidas en google.maps.SymbolPath o definir una ruta personalizada mediante la notación de ruta SVG.

Para obtener más información, consulte la documentación de símbolos.

Cree una marcador arrastrable

Para permitir que los usuarios arrastren un marcador a una ubicación diferente en el mapa, establezca draggable en true en las opciones de marcador.

Personalización adicional del marcador

Para obtener un marcador totalmente personalizado, consulte el ejemplo emergente personalizado.