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

Question

J'ai vu beaucoup d'autres questions similaires à celle-ci ( aquí , aquí y aquí ), mais ils ont tous des réponses acceptées qui ne résolvent pas mon problème. La meilleure solution que j'ai trouvée au problème est l'outil 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 faites une recherche sur Google Maps - avec un point au milieu), il semble seulement fournir des marqueurs avec une lettre dedans, ou avec une icône spéciale.

Answer 1

Vous pouvez demander dynamiquement des images d'icônes à partir de l Google charts api avec les urls :

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

Ce qui ressemble à ça : l'image est 21x34 pixels et la pointe de l'épingle est à la position (10, 34)

Il faut également prévoir une image d'ombre distincte (afin qu'elle ne se superpose pas aux icônes voisines) :

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

Ce qui ressemble à ça : l'image est 40x37 pixels et la pointe de l'épingle est à la position (12, 35)

Lorsque vous construisez votre 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 :

Le crédit est dû à Jack B Nimble pour l'inspiration ;)

Answer 2

Si vous utilisez l'API v3 de Google Maps, vous pouvez utiliser setIcon par exemple

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

Ou comme partie de 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)

Answer 3

Voici une solution intéressante qui utilise l'API Gooogle Maps elle-même. Pas de service externe, pas de bibliothèque supplémentaire. Et elle permet d'utiliser des formes personnalisées et de multiples couleurs et styles. La solution utilise des marqueurs vectoriels, que l'api googlemaps appelle Symboles .

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 du marqueur 'icon' sur l'url de l'image, vous la définissez sur un dictionnaire contenant les options du symbole. A 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 maintenir le point clé de la forme à 0,0, vous évitez de devoir définir les paramètres de centrage de l'icône du 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 voilà un drapeau de couleur très simple et très 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 tel que Inkscape (GNU-GPL, multiplateforme). Quelques conseils utiles :

• Google API n'accepte qu'un seul chemin, vous devez donc transformer n'importe quel autre objet (carré, cercle...) en chemin et les joindre en un seul. Les deux commandes se trouvent dans le menu Chemin.
• Pour déplacer le chemin vers le point (0,0), passez en mode d'édition du chemin (F2), sélectionnez tous les nœuds de contrôle et faites-les glisser. 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 du chemin.
• Pour vous assurer que le point de référence est bien à (0,0), vous pouvez le sélectionner seul et éditer 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'.

Answer 4

Ce qui se rapproche le plus de ce que j'ai pu obtenir avec le StyledMarker est este .

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 de Google de créer le marqueur. .

De la exemple d'utilisation de la classe utiliser "%E2%80%A2" comme votre 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 le fichier StyledMarker.js pour commenter ces 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 l'image 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)
  )
});

Answer 5

Depuis la version 3.11 de l'API de Google Maps, la fonction Icon L'objet remplace MarkerImage . Icon supporte 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