Javascript, Google지도 마커 색상 변경

Javascript, Google지도 마커 색상 변경

---

Javascript를 통해 Google Map 마커 색상을 변경하는 방법을 알려 주시겠습니까?. 저는 이것에 익숙하지 않으며 어떤 도움을 주시면 감사하겠습니다. 감사합니다.

다음 코드를 사용하여 마커를 만들었습니다.

 marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], 
     locations[i][2]),
     animation: google.maps.Animation.DROP,
     map: map
 });

---

Google Maps API v3에서는 마커 아이콘을 변경할 수 있습니다. 예를 들어 녹색 아이콘 사용 :

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

또는 마커 초기화의 일부로 :

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

기타.

---

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

다른 가능성에 대해서는 이 페이지 를 참조하십시오 .

---

이 코드를 사용할 수 있습니다.

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

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

여기에서 예를 참조하십시오.

---

Google 차트 API를 사용하여 즉시 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'
});

---

하나의 맵에 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

---

텍스트, 텍스트 색상, 채우기 색상 및 윤곽선 색상을 지정할 수 있기 때문에 Google Charts API를 사용하는 것이 좋습니다 . 모두 16 진수 색상 코드 (예 : 빨간색은 # 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 변수는 16 진수 값 (해시 기호 빼기)입니다.

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's answer refers to a 3rd party site that redirects to the Google Charts API. This means if that person takes down their server you're hosed. I prefer having the flexibility the Google API offers as well as the reliability of going directly to Google. Just make sure you specify a value for each of the colors or it won't work.

---

I really liked the answer given by Bahadır Yağan except I didn't like depending on a limited set of icons given by Google or an external API to generate my marker icons. Here is the initial solution:

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

And here is my improved solution:

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

I wanted a specific pin icon so I went and made one with inkscape, then opened the SVG file and copied the svg path into the path into the code, but this works with any SVG path that you put in the "path" attribute of the icon object.

Here is the result:

---

To expand upon the accepted answer, you can create custom MarkerImages of any color using the API at http://chart.googleapis.com

In addition to changing color, this also changes marker shape, which may be unwanted.

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: free udacity course on google maps apis

---

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

참고URL : https://stackoverflow.com/questions/11064081/javascript-change-google-map-marker-color