Google Maps API JS v3 - Multiple Simple Marqueur Exemple avec des Marqueurs Personnalisés

Ici est un excellent exemple d'un simple Google Map:
Google Maps API JS v3 - Multiple Simple Marqueur Exemple

Je suis en train d'ajouter à cet exemple, la capacité à attribuer à chaque maker une Icône personnalisée.
Compte tenu de la lié exemple:

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] ];

Je pense à quelque chose comme:

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' ] ];

Merci d'avance pour vos réponses!

bienvenue!!!

OriginalL'auteur blh | 2011-04-14

  1. 3

    Ici est une simple JSFiddle Démo montrant un marqueur personnalisé créé avec les codes suivants.
    Vous pouvez personnaliser l'icône de votre marqueur avec l'icône paramètre lors de la création d'un marqueur. Par exemple:

    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
});

    Vous pouvez définir l'icône param avec l'emplacement de votre marqueur personnalisé de l'image. Ou, dans votre cas, quelque chose comme ceci:

    for(var i=0; i<locations.length; i++){
     myGlobalMarker.push(new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          icon: locations[i][4],
          title: locations[i][0]
     });
}

    Où en supposant locations[i][1] est la lat et locations[i][2] est le gnl. Ce n'est pas testé, mais c'est un socle de ce que vous pouvez faire pour créer des icônes personnalisées. myGlobalMarker est une variable globale tableau qui contient tous les marqueurs. Je ne suis pas sûr à 100% si l'URL absolue ou relative de l'URL est nécessaire pour l'emplacement des icônes. Cependant, dans mon Google Map application j'ai été en mesure d'utiliser un chemin relatif à l'affichage de l'icône personnalisée sur mon marqueur. C'est le résultat final:
    Google Maps API JS v3 - Multiple Simple Marqueur Exemple avec des Marqueurs Personnalisés

    OriginalL'auteur KJYe.Name