Comment changer la couleur d'un marqueur Google Maps?

Question

J'utilise l'API Google Maps pour construire 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 en quelque sorte? Si je dois créer une nouvelle icône, quelle est la manière la plus simple de le faire?

Answer 1

Depuis cartes v2 est désapprouvées, vous êtes probablement intéressé par 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 les broches 'spéciales' en utilisant le nouveau marqueur défini.

Answer 2

MapIconMaker: une bibliothèque pour Google Maps v2

Une façon est d'utiliser le MapIconMaker. Il y a un exemple here. icônes par défaut Google Maps sont la largeur 20px et la hauteur 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 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 Hex 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 une fonction de mettre en évidence, vous pouvez aller avec 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 que je pensais Je devrais mettre à jour cette réponse. J'ai créé une bibliothèque pour les marqueurs personnalisés que vous pouvez trouver dans la bibliothèque d'utilitaires V3 here. Il permet de différentes couleurs et formes, et vous pouvez également placer du texte sur le marqueur. Il fonctionne en utilisant l'API Google Maps, qui propose des méthodes pour créer des marqueurs de type Google Maps. N'hésitez pas à regarder le code source si vous préférez utiliser directement l'API Google Charts. La chose à 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, ainsi, par exemple, la plus longue bulle de texte aura les régions cliquables que l'on attend, comme this example.

Answer 3

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

C'est très facile, et est l'approche que je utilise pour le projet je travaille actuellement.

Answer 4

Personnellement, je pense que les icônes générées par l'API Google Charts sont superbes et faciles à personnaliser de façon dynamique.

Voir ma réponse sur Google Maps API 3 - Custom marker color for default (dot) marker

Answer 5

Le j'ai trouvé moyen le plus simple est d'utiliser BitmapDescriptorFactory.defaultMarker() le 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())) 

Answer 6

Vous n'avez besoin d'aucune bibliothèque personnalisée 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 
     }); 

de Matt Burns Cela fonctionne comme l'OCT 2014, mais est dépréciée.