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

167

J'utilise l'API Google Maps pour créer une carte pleine de marqueurs, mais je veux qu'un marqueur se démarque 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 une chose simple à faire ou dois-je créer une toute nouvelle icône? Si je dois créer une nouvelle icône, quel est le moyen le plus simple de le faire?

abeger
la source
2
Vous pouvez consulter ce post d'hier: stackoverflow.com/questions/2467720/…
Daniel Vassallo
ou peut-être un meilleur post stackoverflow.com/questions/7095574/…
Faizan

Réponses:

45

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 ensemble de logique pour toutes les broches «normales» et un autre qui fait la ou les broches «spéciales» en utilisant le nouveau marqueur défini.

Kevin
la source
24
Note aux futurs lecteurs: Ceci concerne l'API Google Maps v2 qui est obsolète. Si vous utilisez la v3, vous devez chercher ailleurs.
Priestc
12
J'ai cliqué sur le premier lien, ctrl-f pour «couleur»: aucun résultat. Ce serait formidable d'ajouter plus de détails à la réponse pour répondre réellement à la question. L'OP demande spécifiquement s'il est possible de changer la couleur sans créer une nouvelle icône.
qwertzguy
125

Avec la version 3 de l'API Google Maps, le moyen le plus simple de le faire peut être de saisir 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 simplement en utilisant 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 simple et c'est l'approche que j'utilise pour le projet sur lequel je travaille actuellement.

Sean McMains
la source
6
Cette réponse est géniale. J'étais triste que la réponse acceptée soit pour V2, mais heureusement, le défilement vers le bas a payé. Merci!
Adam Tuttle
J'ai créé une version qui ne repose pas sur des images: stackoverflow.com/a/23163930/1689770
Jonathan
49

MapIconMaker: une bibliothèque pour Google Maps v2

Une façon consiste à utiliser MapIconMaker (deadlink). Il y a un exemple ici (deadlink). Les icônes par défaut de Google Maps ont une largeur de 20 pixels et une hauteur de 34 pixels, vous pouvez donc utiliser quelque chose comme ceci pour é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 encore plus les choses:

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 les couleurs d'un caprice.

Mise à jour: La couleur hexadécimale de l'icône par défaut est "# FE7569". En outre, vous pouvez 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 qu'une fonction soit mise en évidence, vous pouvez utiliser quelque chose comme ça, 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

Depuis que V2 a été remplacé par V3 il y a quelque temps, j'ai pensé que je devrais mettre à jour cette réponse. J'ai créé une bibliothèque de marqueurs personnalisés qui se trouve dans la bibliothèque de l'utilitaire V3 ici (deadlink). Il permet différentes couleurs et formes, et vous pouvez également placer du texte sur le marqueur. Cela fonctionne en utilisant l'API Google Charts qui propose des 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.

Le truc à propos de cette bibliothèque, cependant, est qu'elle prend soin de définir les régions cliquables de ces images de marqueur pour vous, donc, par exemple, la plus longue bulle avec du texte aura les régions cliquables attendues , comme cet exemple (lien mort).

Bob
la source
3
Il semble que ce soit uniquement compatible avec l'API GMaps v2?
Tigraine
7
@Tigraine J'ai en fait créé une toute nouvelle bibliothèque à utiliser pour la v3 appelée "StyledMarker" qui se trouve dans la bibliothèque d'utilitaires v3: code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Bob
Regardez la réponse de Sean McMains pour la v3
smp7d
@Matt À l'origine, oui, ce n'était que la v2. J'ai depuis mis à jour pour inclure une solution v3
Bob
Pour info, "setImage" n'est pas une fonction du marché dans l'API Google Maps v3. "setIcon" est la fonction correcte à utiliser.
Nick Bork
39

entrez la description de l'image ici entrez la description de l'image ici Conception matérielle

ÉDITÉ EN MARS 2019 maintenant avec la couleur de la broche programmatique,

JAVASCRIPT PURE, PAS D'IMAGES, SUPPORTS LES ÉTIQUETTES

ne repose plus sur l'API Charts obsolète

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });
Jonathan
la source
2
Cette fonctionnalité est malheureusement obsolète comme vous pouvez le voir ici . C'est une situation tellement décevante, où cela est obsolète et la version précédente que j'ai utilisée MapIconMaker, est déjà obsolète.
zerowords
Notez que cela ne fonctionne pas avec https, uniquement avec http. Bummer!
JoeGalind
@JoeGalind y a-t-il une raison pour laquelle le cryptage est requis lors de la récupération des couleurs? Je veux dire, je ne vois aucun risque de sécurité à utiliser à httpmoins qu'il n'expose quelque chose dont je ne suis pas au courant dans l'en-tête
Jonathan
@JonathanLeaders: Cela signifie que vous devez ajouter le domaine à la liste autorisée sur le fichier info.plist de votre projet, car il ne s'agit pas d'un appel https.
JoeGalind
6
Mis à jour pour 2019, n'est plus obsolète
Jonathan
12

Le moyen le plus simple que j'ai trouvé est d'utiliser BitmapDescriptorFactory.defaultMarker () la documentation a même un exemple de réglage de la couleur. De mon propre code:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))
Michael Hamilton
la source
Est-ce uniquement Android, ou également pour les navigateurs Web?
Jonathan
@Jonathan - ceci est uniquement pour Android - l'exemple qu'il a posté est en JAVA
dazza5000
2

Pour personnaliser les marqueurs, vous pouvez le faire à partir de cet outil en ligne: https://materialdesignicons.com/

Dans votre cas, vous voulez le map-marker qui est disponible ici: https://materialdesignicons.com/icon/map-marker et que vous pouvez personnaliser en ligne.

Si vous souhaitez simplement changer la couleur rouge par défaut en bleu, vous pouvez charger cette icône: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

Il a été mentionné dans ce fil: https://stackoverflow.com/a/32651327/6381715

GuGuss
la source