Comment puis-je modifier la couleur d'un marqueur Google Maps ?

Question

J'utilise l'API Google Maps pour créer une carte remplie de marqueurs, mais je veux qu'un marqueur se distingue des autres. La chose la plus simple à faire, je pense, serait de changer la couleur du marqueur en bleu, au lieu de rouge. Est-ce facile à faire ou dois-je créer une nouvelle icône ? Si je dois créer une nouvelle icône, quel est le moyen le plus simple de le faire ?

Answer 1

Avec la version 3 de l'API Google Maps, le moyen le plus simple d'y parvenir est peut-être de récupérer un jeu d'icônes personnalisé, comme celui que Benjamin Keen a créé ici :

http://www.benjaminkeen.com/?p=105

Si vous placez toutes ces icônes au même endroit que votre page de carte, vous pouvez coloriser un marqueur en utilisant simplement l'option d'icône appropriée lors de sa création :

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

C'est très facile, et c'est l'approche que j'utilise pour le projet sur lequel je travaille actuellement.

Answer 2

Vous n'avez pas besoin de bibliothèques personnalisées pour Google Maps v3.

var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
    new google.maps.Size(40, 37),
    new google.maps.Point(0, 0),
    new google.maps.Point(12, 35));
var marker = new google.maps.Marker({
            position: new google.maps.LatLng(0,0), 
            map: map,
            icon: pinImage,
            shadow: pinShadow
        });

de Matt Burns Cette méthode fonctionne depuis octobre 2014, mais elle est obsolète.

Answer 3

MapIconMaker : une bibliothèque pour Google Maps v2

Une façon de procéder est d'utiliser le MapIconMaker . Il y a un exemple ici . Les icônes par défaut de Google Maps ont une largeur de 20px et une hauteur de 34px, vous pouvez donc utiliser quelque chose comme ceci pour les émuler :

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

Vous pouvez même l'envelopper dans une fonction pour vous faciliter la tâche :

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

C'est ce que j'utilise personnellement pour tous les marqueurs que je crée. Je préfère avoir la possibilité de changer de couleur sur un coup de tête.

Mise à jour : La couleur hexagonale de l'icône par défaut est "#FE7569". Vous pouvez également définir une image sur un marqueur plutôt que de créer un nouveau marqueur avec une nouvelle icône. Donc, si vous voulez une fonction pour mettre en évidence, vous pouvez aller avec quelque chose comme ceci, en utilisant la fonction ci-dessus :

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

StyledMarker : une bibliothèque pour Google Maps v3

Comme la V2 a été remplacée par la V3 il y a quelque temps, j'ai pensé que je devais mettre à jour cette réponse. J'ai créé une bibliothèque pour les marqueurs personnalisés qui se trouve dans la bibliothèque d'utilitaires de V3. ici . Il permet d'utiliser différentes couleurs et formes, et vous pouvez également placer du texte sur le marqueur. Il fonctionne en utilisant l'API Google Charts qui dispose de méthodes pour créer des marqueurs de type Google Maps. N'hésitez pas à consulter le code source si vous préférez utiliser directement l'API Google Charts.

L'avantage de cette bibliothèque, cependant, est qu'elle se charge de définir les régions cliquables de ces images de marqueurs pour vous, de sorte que, par exemple, la bulle plus longue avec du texte aura les régions cliquables auxquelles on s'attend, comme suit cet exemple .

Answer 4

Les cartes v2 étant obsolètes, vous êtes probablement intéressé par les cartes v3 : https://developers.google.com/maps/documentation/javascript/markers#simple_icons

Pour les cartes v2 :

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

Vous auriez un jeu de logique pour toutes les broches "normales", et un autre pour les broches "spéciales" utilisant le nouveau marqueur défini.

Answer 5

Personnellement, je trouve que les icônes générées par l'API Google Charts sont superbes et faciles à personnaliser de manière dynamique.

Voir ma réponse sur Google Maps API 3 - Couleur de marqueur personnalisée pour le marqueur par défaut (point)