Google Maps JS API v3 – Ejemplo de marcador múltiple simple con marcadores personalizados

Este es un gran ejemplo de un simple Mapa de Google : Google Maps JS API v3 – Ejemplo simple de marcador múltiple

Estoy tratando de agregar a este ejemplo la capacidad de asignar a cada fabricante un icono personalizado. Dado el ejemplo vinculado:

var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; 

Estoy pensando algo como:

 var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4,'images/icon1.png'], ['Coogee Beach', -33.923036, 151.259052, 5,'images/icon2.png' ], ['Cronulla Beach', -34.028249, 151.157507, 3,'images/icon3.png' ], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2,'images/icon4.png' ], ['Maroubra Beach', -33.950198, 151.259302, 1,'images/icon5.png' ] ]; 

¡Gracias de antemano por sus respuestas!

One Solution collect form web for “Google Maps JS API v3 – Ejemplo de marcador múltiple simple con marcadores personalizados”

Aquí hay una simple demostración de JSFiddle que muestra un marcador personalizado creado con los siguientes códigos. Puede personalizar el icono de su marcador con el parámetro icono al crear un marcador. Por ejemplo:

 var marker = new google.maps.Marker({ position: latlng, map: map, icon: 'http://www.kjftw.com/gmap/images/icons/numeric/red10.png', zIndex: Math.round(latlng.lat() * -100000) < < 5 }); 

Puede configurar el ícono param con la ubicación de su imagen de marcador personalizada. O en tu caso algo como esto:

 for(var i=0; i 

Donde asumir locations[i][1] es la lat y locations[i][2] es la lng. Esto no se ha probado, pero es una base para lo que puede hacer para crear un icono personalizado. myGlobalMarker es una matriz global de variables que contiene todos los marcadores. No estoy 100% seguro de si se necesita una URL absoluta o una URL relativa para la ubicación del icono. Sin embargo, en mi aplicación Google Map pude usar la ruta relativa para mostrar un icono personalizado en mi marcador. Este es el resultado final: introduzca la descripción de la imagen aquí

  • Rutas / routes / paths personalizados en Google Maps
  • google maps api v3 sin tags?
  • Agregue dinámicamente marcadores de Google Map V3 con jQuery
  • unión de los polígonos de googlemaps con clipper.js
  • API de Google Maps - InfoBubble no se cerrará - cerrar () no funciona
  • ¿Cómo hacer llamadas AJAX entre dominios a Google Maps API?
  • Comportamiento incoherente dibujando una ruta entre dos puntos en Google Maps v3
  • cómo usar fromPointToLatLng en google maps v3
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.