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?

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.

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.

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).

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

Personnellement, je pense que les icônes générées par l'API Google Charts ont fière allure et sont faciles à personnaliser dynamiquement.

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

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()))

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

Cet article relativement récent fournit un exemple simple avec un ensemble limité d'icônes colorées sur Google Maps.