web-dev-qa-db-fra.com

Javascript, changer la couleur du marqueur Google Map

Puis-je connaître un moyen de changer la couleur du marqueur Google Map via Javascript .. Je suis nouveau dans ce domaine et toute aide serait la bienvenue, merci.

J'ai utilisé le code suivant pour créer un marqueur

 marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], 
     locations[i][2]),
     animation: google.maps.Animation.DROP,
     map: map
 });
javascriptgoogle-mapsgoogle-maps-markers
63
Hasitha Shan

Dans Google Maps API v3, vous pouvez essayer de changer l’icône du marqueur. Par exemple, pour l'utilisation de l'icône verte:

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:

Etc.

158
jsalonen

Vous pouvez utiliser la propriété strokeColor:

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});

Voir cette page pour d'autres possibilités.

38
Bahadır Yağan

Vous pouvez utiliser ce code cela fonctionne bien.

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

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

voir exemple ici

10
khurram

vous pouvez utiliser l’API Google Chart et générer n’importe quelle couleur avec le code RGB à la volée:

exemple: marqueur avec #ddd couleur:

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

inclure comme indiqué ci-dessus avec

 var marker = new google.maps.Marker({
    position: marker,
    title: 'Hello World',
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd'
});
8
guido _nhcol.com.br_

J'ai 4 navires à définir sur une seule carte, j'utilise donc l'exemple des développeurs de Google, puis je l'ai tordu.

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

Dans la fonction ci-dessous, je définis 3 options de couleur supplémentaires:

function setMarkers(map, locations) {
...
var image = {
    url: 'img/bullet_amarelo.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(40, 40),
    // The Origin for this image is 0,0.
    Origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 40)
  };
  var image1 = {
            url: 'img/bullet_azul.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            size: new google.maps.Size(40, 40),
            // The Origin for this image is 0,0.
            Origin: new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            anchor: new google.maps.Point(0, 40)
          };
  var image2 = {
          url: 'img/bullet_vermelho.png',
          // This marker is 20 pixels wide by 32 pixels tall.
          size: new google.maps.Size(40, 40),
          // The Origin for this image is 0,0.
          Origin: new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at 0,32.
          anchor: new google.maps.Point(0, 40)
        };
  var image3 = {
          url: 'img/bullet_verde.png',
          // This marker is 20 pixels wide by 32 pixels tall.
          size: new google.maps.Size(40, 40),
          // The Origin for this image is 0,0.
          Origin: new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at 0,32.
          anchor: new google.maps.Point(0, 40)
        };
...
}

Et dans le soufflet FOR, je mets une couleur pour chaque navire:

for (var i = 0; i < locations.length; i++) {
...
    if (i==0) var imageV=image;
    if (i==1) var imageV=image1;
    if (i==2) var imageV=image2;
    if (i==3) var imageV=image3;
...
# remember to change icon: image to icon: imageV
}

Le résultat final:

http://www.mercosul-line.com.br/site/teste.html

3
LuyRamone

Je suggère d'utiliser Google Charts API , car vous pouvez spécifier le texte, la couleur du texte, la couleur de remplissage et la couleur de contour, le tout à l'aide de codes de couleur hexagonaux, par exemple. # FF0000 pour le rouge. Vous pouvez l'appeler comme suit:

function getIcon(text, fillColor, textColor, outlineColor) {
  if (!text) text = '•'; //generic map dot
  var iconUrl = "http://chart.googleapis.com/chart?cht=d&chdp=mapsapi&chl=pin%27i\\%27[" + text + "%27-2%27f\\hv%27a\\]h\\]o\\" + fillColor + "%27fC\\" + textColor + "%27tC\\" + outlineColor + "%27eC\\Lauto%27f\\&ext=.png";
  return iconUrl;
}

Ensuite, lorsque vous créez votre marqueur, vous définissez simplement la propriété icon en tant que telle, où les variables myColor sont des valeurs hexadécimales (moins le signe dièse):

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  animation: google.maps.Animation.DROP,
  map: map,
  icon: getIcon(null, myColor, myColor2, myColor3)
});

Vous pouvez utiliser http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000, qui est un peu plus facile à déchiffrer, en tant qu'URL alternative si vous devez uniquement définir le texte et la couleur de remplissage.

la réponse de khurram fait référence à un site tiers qui redirige vers l'API Google Charts. Cela signifie que si cette personne désactive leur serveur, vous êtes blessé. Je préfère bénéficier de la souplesse offerte par l'API Google et de la fiabilité de l'accès direct à Google. Assurez-vous simplement de spécifier une valeur pour chacune des couleurs, sinon cela ne fonctionnera pas.

2
Mideus

Pour développer la réponse acceptée, vous pouvez créer une MarkerImages personnalisée avec n'importe quelle couleur à l'aide de l'API à l'adresse http://chart.googleapis.com

En plus de changer de couleur, cela change également la forme du marqueur, ce qui peut être indésirable.

const marker = new window.google.maps.Marker(
        position: markerPosition,
        title: markerTitle,
        map: map)
marker.addListener('click', () => marker.setIcon(changeIcon('00ff00'));)

const changeIcon = (newIconColor) => {
    const newIcon = new window.google.maps.MarkerImage(
        `http://chart.googleapis.com/chart?                                      
        chst=d_map_spin&chld=1.0|0|${newIconColor}|60|_|%E2%80%A2`,
        new window.google.maps.Size(21, 34),
        new window.google.maps.Point(0, 0),
        new window.google.maps.Point(10, 34),
        new window.google.maps.Size(21,34)
    );
    return newIcon
}

Source: cours gratuit sur Google maps apis

1
AlexNikonov

J'ai vraiment aimé la réponse donnée par Bahadır Yağan, sauf que je n'aimais pas dépendre d'un ensemble limité d'icônes données par Google ou d'une API externe pour générer mes icônes de marqueur. Voici la solution initiale:

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});

Et voici ma solution améliorée:

var marker = new google.maps.Marker({
            position: myLatlng,
            icon:{
                path: 'm 12,2.4000002 c -2.7802903,0 -5.9650002,1.5099999 -5.9650002,5.8299998 0,1.74375 1.1549213,3.264465 2.3551945,4.025812 1.2002732,0.761348 2.4458987,0.763328 2.6273057,2.474813 L 12,24 12.9825,14.68 c 0.179732,-1.704939 1.425357,-1.665423 2.626049,-2.424188 C 16.809241,11.497047 17.965,9.94 17.965,8.23 17.965,3.9100001 14.78029,2.4000002 12,2.4000002 Z',
                fillColor: '#00FF00',
                fillOpacity: 1.0,
                strokeColor: '#000000',
                strokeWeight: 1,
                scale: 2,
                anchor: new google.maps.Point(12, 24),
            },
        });

Je voulais une icône en forme d’épingle spécifique, j’en ai créé une avec inkscape, puis j’ai ouvert le fichier SVG et copié le chemin SVG dans le chemin, mais cela fonctionne avec tous les chemins SVG que vous avez entrés dans l’attribut "chemin" du fichier. objet icône.

Voici le résultat:

enter image description here

1
androidseb