Javascript, изменить цвет маркера google map

Ответ 1

В Google Maps API v3 вы можете попробовать изменить значок маркера. Например, для использования зеленого значка:

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

Или как часть маркера init:

marker = new google.maps.Marker({
    icon: 'http://...'
});

Другие цвета:

• http://maps.google.com/mapfiles/ms/icons/blue-dot.png
• http://maps.google.com/mapfiles/ms/icons/red-dot.png

Etc.

Ответ 2

Вы можете использовать свойство 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
});

См. эту страницу для других возможностей.

Ответ 3

Вы можете использовать этот код, он отлично работает.

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

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

см. пример здесь

Ответ 4

вы можете использовать диаграмму google goi и генерировать любой цвет с кодом rgb на лету:

пример: маркер с цветом #ddd:

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

включить, как указано выше, с помощью

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

Ответ 5

У меня есть 4 корабля для установки на одну карту, поэтому я использую пример Google Developers, а затем скрутил его

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

В функции ниже я установил еще 3 варианта цвета:

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

И в следующем выпуске FOR я установил один цвет для каждого корабля:

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
}

Конечный результат:

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

Ответ 6

Я предлагаю использовать API Google Карт, потому что вы можете указать текст, цвет текста, цвет заливки и цвет контура, используя шестицветный цвет коды, например # FF0000 для красного цвета. Вы можете вызвать его следующим образом:

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

Затем, когда вы создаете свой маркер, вы просто устанавливаете свойство значка как таковое, где переменные myColor являются шестнадцатеричными значениями (минус знак хэша):

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

Вы можете использовать http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000, который немного проще расшифровать, в качестве альтернативного URL, если вам нужно только установить текст и цвет заливки.

Ответ khurram относится к стороннему сайту, который перенаправляет на API графиков Google. Это означает, что если этот человек уберет свой сервер, вы будете взволнованы. Я предпочитаю иметь гибкость, предлагаемую Google API, а также надежность перехода непосредственно в Google. Просто убедитесь, что вы указали значение для каждого из цветов или оно не будет работать.

Ответ 7

var map_marker = $( ". map-marker" ). children ( "img" ). attr ( "src" )       var pinImage = new google.maps.MarkerImage(map_marker);

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