avec la version 3 de L'API GoogleMaps, la manière la plus simple de faire cela peut être en saisissant un jeu d'icônes personnalisé, comme celui que Benjamin Keen a créé ici:

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

si vous mettez 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 super facile, 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 est d'utiliser le MapIconMaker . Il y a un exemple ici . Les icônes par défaut de Google Maps sont 20px width et 34px height, donc vous pouvez 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 pourriez même l'envelopper dans une fonction pour rendre les choses encore plus facile sur vous-même:

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 coup de tête.

mise à jour: la couleur hexadécimale de l'icône par défaut est "#FE7569". En outre, vous pouvez setImage 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 pourriez 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

puisque 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 pour les marqueurs personnalisés qui peuvent être trouvés sur la bibliothèque D'utilité V3 ici . Il permet différentes couleurs et de formes, et vous pouvez placer du texte sur le marqueur. Il fonctionne en utilisant L'API Google Charts qui a 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 L'API Googlechamps directement.

le truc à propos de ça bibliothèque, cependant, est qu'il prend soin de définir les régions cliquables de ces images marqueur pour vous, donc, par exemple, la plus longue bulle avec du texte aura les régions cliquables que l'on attend, comme cet exemple .

(déprécié) 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
        });

à partir de Matt Burns Cela fonctionne à partir D'octobre 2014, mais est déprécié.

personnellement, je pense que les icônes générées par L'API Google Charts sont superbes et sont faciles à personnaliser dynamiquement.

voir ma réponse sur API GoogleMaps 3-Custom marker color for default (dot) marker

le moyen le plus simple que j'ai trouvé est D'utiliser BitmapDescriptorFactory.defaultMarker () le 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 carte-marqueur qui est disponible ici: https://materialdesignicons.com/icon/map-marker et que vous pouvez personnaliser en ligne.

si vous voulez 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