API Google Maps 3 - Couleur de marqueur personnalisée pour le marqueur par défaut (point)

J'ai vu beaucoup d'autres questions similaires à celle-ci ( ici , ici et ici ), mais elles ont toutes accepté des réponses qui ne résolvent pas mon problème. La meilleure solution que j'ai trouvée au problème est la bibliothèque StyledMarker , qui vous permet de définir des couleurs personnalisées pour les marqueurs, mais je n'arrive pas à utiliser le marqueur par défaut (celui que vous obtenez lorsque vous effectuez une recherche sur Google Maps - avec un point au milieu), il semble simplement fournir aux marqueurs une lettre ou une icône spéciale.

Vous pouvez demander dynamiquement des images d'icônes à partir de l' API Google Maps avec les URL:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

Qui ressemble à ceci: l'image est de 21x34 pixels et la pointe de la broche est en position (10, 34)

Et vous aurez également besoin d'une image d'ombre distincte (afin qu'elle ne chevauche pas les icônes voisines):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

Qui ressemble à ceci: l'image est de 40x37 pixels et la pointe de la broche est en position (12, 35)

Lorsque vous construisez vos MarkerImage, vous devez définir la taille et les points d'ancrage en conséquence:

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

Vous pouvez ensuite ajouter le marqueur à votre carte avec:

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

Remplacez simplement "FE7569" par le code couleur que vous recherchez. Par exemple:

Crédit dû à Jack B Nimble pour l'inspiration;)

Si vous utilisez l'API Google Maps v3, vous pouvez utiliser setIconpar exemple

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Ou dans le cadre du marqueur init:

marker = new google.maps.Marker({
    icon: 'http://...'
});

Autres couleurs:

• Marqueur bleu
• Marqueur rouge
• Marqueur violet
• Marqueur jaune
• Marqueur vert

Utilisez le morceau de code suivant pour mettre à jour les marqueurs par défaut avec des couleurs différentes.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

Voici une belle solution utilisant l'API Gooogle Maps elle-même. Pas de service externe, pas de bibliothèque supplémentaire. Et il permet des formes personnalisées et plusieurs couleurs et styles. La solution utilise des marqueurs vectoriels, que googlemaps api appelle Symbols .

Outre les quelques symboles prédéfinis et limités, vous pouvez créer n'importe quelle forme de n'importe quelle couleur en spécifiant une chaîne de chemin SVG ( Spec ).

Pour l'utiliser, au lieu de définir l'option de marqueur «icône» sur l'url de l'image, vous le définissez dans un dictionnaire contenant les options de symbole. À titre d'exemple, j'ai réussi à créer un symbole qui est assez similaire au marqueur standard:

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

Si vous prenez soin de garder le point clé de la forme à 0,0, vous évitez de définir des paramètres de centrage des icônes de marqueur. Un autre exemple de chemin, le même marqueur sans le point:

    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',

Et ici, vous avez un drapeau très simple et laid:

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

Vous pouvez également créer les chemins à l'aide d'un outil visuel comme Inkscape (GNU-GPL, multiplateforme). Quelques conseils utiles:

• L'API Google n'accepte qu'un seul chemin, vous devez donc transformer tout autre objet (carré, cercle ...) en chemin et les joindre en un seul. Les deux commandes du menu Chemin.
• Pour déplacer le chemin vers le (0,0), passez en mode d'édition de chemin (F2), sélectionnez tous les nœuds de contrôle et faites-les glisser. Déplacer l'objet avec F1 ne changera pas les coordonnées des nœuds de chemin.
• Pour vous assurer que le point de référence est à (0,0), vous pouvez le sélectionner seul et modifier les coordonnées à la main dans la barre d'outils supérieure.
• Après avoir enregistré le fichier SVG, qui est un XML, ouvrez-le avec un éditeur, recherchez l'élément svg: path et copiez le contenu de l'attribut 'd'.

Eh bien, la chose la plus proche que j'ai pu obtenir avec StyledMarker est la suivante .

La balle au milieu n'est pas aussi grosse que celle par défaut. La classe StyledMarker construit simplement cette URL et demande à l'API Google de créer le marqueur .

À partir de l' exemple d' utilisation de classe, utilisez "% E2% 80% A2" comme texte, comme dans:

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

Vous devrez modifier StyledMarker.js pour commenter les lignes:

  if (text_) {
    text_ = text_.substr(0,2);
  }

car cela réduira la chaîne de texte à 2 caractères.

Vous pouvez également créer des images de marqueur personnalisées basées sur celle par défaut avec les couleurs que vous souhaitez et remplacer le marqueur par défaut par un code tel que celui-ci:

marker = new google.maps.Marker({
  map:map,
  position: latlng,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});

J'ai un peu étendu la réponse de vokimon , ce qui le rend un peu plus pratique pour changer d'autres propriétés également.

function customIcon (opts) {
  return Object.assign({
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
    fillColor: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

Usage:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

Ou lors de la définition d'un nouveau marqueur:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});

Salut, vous pouvez utiliser l'icône comme SVG et définir les couleurs. Voir ce code

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            icon: {
                path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>

depuis la version 3.11 de l'API google maps, l' Iconobjet remplace MarkerImage. L'icône prend en charge les mêmes paramètres que MarkerImage. J'ai même trouvé que c'était un peu plus simple.

Un exemple pourrait ressembler à ceci:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

pour plus d'informations consultez ce site

Dans Internet Explorer , cette solution ne fonctionne pas en SSL.

On peut voir l'erreur dans la console comme:

SEC7111 : La sécurité HTTPS est compromise par cela ,

Solution : comme l'un des utilisateurs suggérés ici, remplacez chart.apis.google.com par chart.googleapis.com pour le chemin URL afin d'éviter l'erreur SSL.

Comme d'autres l'ont mentionné, la réponse de vokimon est excellente, mais malheureusement, Google Maps est un peu lent lorsqu'il existe de nombreux marqueurs basés sur SymbolPath / SVG à la fois.

Il semble que l'utilisation d'un URI de données soit beaucoup plus rapide, à peu près au même niveau que les PNG.

De plus, comme il s'agit d'un document SVG complet, il est possible d'utiliser un cercle rempli approprié pour le point. Le chemin est modifié afin qu'il ne soit plus décalé vers le haut à gauche, donc l'ancre doit être définie.

Voici une version modifiée qui génère ces marqueurs:

var coloredMarkerDef = {
    svg: [
        '<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
            '<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
            '<circle cx="11" cy="11" r="3"/>',
        '</svg>'
    ].join(''),
    anchor: {x: 11, y: 41},
    size: {width: 22, height: 41}
};

var getColoredMarkerSvg = function(color) {
    return coloredMarkerDef.svg.replace('{fillColor}', color);
};

var getColoredMarkerUri = function(color) {
    return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};

var getColoredMarkerIcon = function(color) {
    return {
        url: getColoredMarkerUri(color),
        anchor: coloredMarkerDef.anchor,
        size: coloredMarkerDef.size,
        scaledSize: coloredMarkerDef.size
    }
};

Usage:

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude),
    icon: getColoredMarkerIcon("#FFF")
});

L'inconvénient, tout comme une image PNG, est que tout le rectangle est cliquable. En théorie, il n'est pas trop difficile de tracer le chemin SVG et de générer un polygone MarkerShape .

Vous pouvez utiliser ce code, il fonctionne très bien.

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });

Combinez un marqueur basé sur un symbole dont le chemin dessine le contour, avec un caractère «●» pour le centre. Vous pouvez remplacer le point par un autre texte («A», «B», etc.) comme vous le souhaitez.

Cette fonction renvoie des options pour un marqueur avec le texte donné (le cas échéant), la couleur du texte et la couleur de remplissage. Il utilise la couleur du texte pour le contour.

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}

J'essaie de deux façons de créer le marqueur google map personnalisé, ce code d'exécution utilisé canvg.js est la meilleure compatibilité pour le navigateur.Le code commenté n'est pas compatible avec IE11.

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>

J'ai essayé pendant longtemps d'améliorer le marqueur dessiné de vokimon et de le rendre plus similaire à celui de Google Maps (et à peu près réussi). Voici le code que j'ai obtenu:

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

Je l'ai également mis à l'échelle de 0,8.

changez-le en chart.googleapis.com pour le chemin, sinon SSL ne fonctionnera pas

En utilisant swift et Google Maps Api v3, c'était la façon la plus simple de le faire:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

j'espère que cela aide quelqu'un.

Ce sont des marqueurs circulaires personnalisés

small_red:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

small_yellow:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

small_green:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

Ce sont des images png 9x9.

Une fois qu'ils sont sur votre page, vous pouvez simplement les faire glisser et vous aurez le fichier png réel.

Vous pouvez également utiliser un code couleur.

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });

Parfois, quelque chose de vraiment simple, peut être répondu complexe. Je ne dis pas que l'une des réponses ci-dessus est incorrecte, mais je voudrais simplement appliquer, que cela peut être fait aussi simplement que ceci:

Je sais que cette question est ancienne, mais si quelqu'un veut simplement changer de couleur de broche ou de marqueur, consultez la documentation: https://developers.google.com/maps/documentation/android-sdk/marker

lorsque vous ajoutez votre marqueur, définissez simplement la propriété icon:

GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
    .position(latLng)
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

Vous avez le choix entre 10 couleurs par défaut . Si cela ne suffit pas (la solution simple), j'opterais probablement pour le plus complexe donné dans les autres réponses, répondant à un besoin plus complexe.

ps: J'ai écrit quelque chose de similaire dans une autre réponse et donc je devrais me référer à cette réponse, mais la dernière fois que je l'ai fait, on m'a demandé de poster la réponse car elle était si courte (comme celle-ci) ..