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

StackOverflow https://stackoverflow.com/questions/2472957

  •  20-09-2019
  •  | 
  •  

Question

J'utilise l'API Google Maps pour construire une carte complète de marqueurs, mais je veux un marqueur pour se démarquer des autres. La chose à faire simple, je pense, serait de changer la couleur du marqueur au bleu, au lieu de rouge. Est-ce une chose simple à faire ou dois-je créer une nouvelle icône tout en quelque sorte? Si je dois créer une nouvelle icône, ce qui est la meilleure façon de le faire?

Était-ce utile?

La solution

Depuis v2 cartes est désapprouvées, 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 faire toutes les broches « ordinaires », et un autre qui fait la broche « spéciale » (s) à l'aide du nouveau marqueur défini.

Autres conseils

Avec la version 3 de l'API Google Maps, la meilleure façon de faire 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 la 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'
});

Ceci est très facile, et est l'approche que je utilise pour le projet, je travaille sur le moment.

MapIconMaker: une bibliothèque pour Google Maps v2

Une façon est d'utiliser le MapIconMaker . Il y a un exemple ici . icônes par défaut Google Maps sont la largeur et la hauteur 20px 34px, vous pouvez donc utiliser quelque chose comme ceci à imiter: 

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 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 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 Hex de l'icône par défaut est « # FE7569 ». , Vous pouvez également setImage sur un marqueur plutôt que de créer un nouveau marqueur avec une nouvelle icône. Donc, si vous voulez une fonction que vous pouvez aller mettre en évidence quelque chose comme cela, 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 V2 a été remplacé par V3 il y a quelque temps, je pensais que je devrais mettre à jour cette réponse. J'ai créé une bibliothèque pour les marqueurs personnalisés qui se trouve sur la bibliothèque utilitaire V3 . Il permet de différentes couleurs et de formes, et vous pouvez placer le texte sur le marqueur ainsi. Il fonctionne en utilisant l'API graphiques Google qui a des méthodes pour créer des marqueurs de type Google Maps. Ne hésitez pas à regarder le code source si vous préférez utiliser directement l'API graphiques Google.

La chose au sujet de cette bibliothèque, cependant, est qu'il prend soin de définir les régions cliquables de ces images marqueurs pour vous, donc, par exemple, la bulle plus avec le texte aura les régions cliquables on attend, comme cet exemple .

entrer image description ici entrer la description d'image ici Matériel de conception

ÉDITÉ mars 2019 maintenant avec la couleur de la broche programmatique,

PURE JAVASCRIPT, PAS D'IMAGES, SUPPORTS LABELS

ne repose plus sur API graphiques dépréciée 

    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 graphiques Google ont fière allure et sont faciles à personnaliser dynamiquement.

Voir ma réponse sur API Google Maps 3 - couleur de marqueur personnalisé pour le marqueur par défaut (dot)

J'ai trouvé moyen le plus simple est d'utiliser BitmapDescriptorFactory.defaultMarker () documentation a même un exemple de définir 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 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 par défaut rouge au 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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top