web-dev-qa-db-fra.com

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

J'utilise l'API Google Maps pour créer une carte complète de marqueurs, mais je souhaite qu'un marqueur se démarque des autres. Je pense que la chose la plus simple à faire 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 nouvelle icône? Si je dois créer une nouvelle icône, quel est le moyen le plus simple de le faire?

google-mapsgoogle-maps-api-2
162
abeger

Puisque maps v2 est obsolète, 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 voudriez qu'un ensemble de logique fasse toutes les broches "normales" et un autre qui effectue la ou les broches "spéciales" en utilisant le nouveau marqueur défini.

45
Kevin

Avec la version 3 de l'API Google Maps, le moyen le plus simple de procéder consiste à récupérer un jeu d'icônes personnalisé, comme celui créé par Benjamin Keen 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 facile, et c'est l'approche que j'utilise pour le projet sur lequel je travaille actuellement.

120
Sean McMains

MapIconMaker: une bibliothèque pour Google Maps v2

Une solution consiste à utiliser le MapIconMaker . Il y a un exemple ici . 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 envelopper une fonction pour vous simplifier la vie:

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 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 surlignée, vous pouvez utiliser 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

Depuis que la V2 a été remplacée par la 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 dans la bibliothèque d'utilitaires V3 ici . 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 problème avec cette bibliothèque, cependant, est qu’elle s’occupe de définir les régions cliquables de ces images de marqueur. Ainsi, par exemple, la bulle plus longue contenant du texte aura les régions cliquables attendues, comme cet exemple .

49
Bob

enter image description hereenter image description here Conception des matériaux

Édité en mars 2019 maintenant avec la couleur de broche programmatique,

PURE JAVASCRIPT, PAS D'IMAGES, SUPPORTS LABELS

ne repose plus sur une API de graphiques 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,
    });
33
Jonathan

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

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

23
matt burns

Le moyen le plus simple que j'ai trouvé est d'utiliser BitmapDescriptorFactory.defaultMarker () le documentation a même un exemple de définition 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()))
12
Michael Hamilton

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

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

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

Cela a été mentionné dans ce fil de discussion: https://stackoverflow.com/a/32651327/6381715

2
GuGuss