¡Hazlos rosa, azul, verde, amarillo o morado!
De forma predeterminada, el marcador de Google Maps es de color rojo. Este artículo mostrará cómo agregar marcadores de diferentes colores a Google Maps. Entonces empecemos. ?
1. Cargue Google Maps
Cree un archivo HTML que cargue Google Maps siguiendo los documentos oficiales de la API de Google Maps: Hello World.
Su código se parecerá al fragmento de código a continuación.
Nota: Recuerde cambiar YOUR_API_KEYa su clave API real de Google Maps.
2. Agrega marcadores de diferentes colores
Para agregar un marcador de color azul, necesitamos cambiar el icono del marcador. Esto se hace agregando una propiedad de icono y especificando una URL como a continuación.
icon: { url: "//maps.google.com/mapfiles/ms/icons/blue-dot.png" }Tenga en cuenta que especificamos blue-dot.pngal final de la URL para obtener un marcador azul. Para agregar un marcador verde, simplemente cámbielo a green-dot.pngpara que la URL sea //maps.google.com/mapfiles/ms/icons/green-dot.png.
Algunos otros colores disponibles:
- rosado:
pink-dot.png - amarillo:
yellow-dot.png - púrpura:
purple-dot.png
Para obtener la URL de más iconos de marcadores, consulte este sitio web.
3. Envuelva en la función de agregar marcador
Para hacer el código más limpio, podemos definir una addMarkerfunción que tome dentro latLngy fuera colordel marcador. Tenga en cuenta que almacenamos los marcadores agregados en un global markersArrayen caso de que necesitemos realizar alguna operación en los marcadores más adelante.
Abra el archivo HTML en el navegador. Debe tener un aspecto como este:
Puede obtener la versión final completa del código aquí. Hágame saber cómo va en los comentarios a continuación.
No dudes en consultar otro tutorial de Google Maps que he escrito:
Implemente haga clic en JavaScript Google Map para agregar marcadores arrastrables con polilínea