Google Maps API 3-기본 (도트) 마커의 맞춤 마커 색상

나는 이것과 비슷한 다른 많은 질문 ( here , here 및 here )을 보았지만 모두 내 문제를 해결하지 못하는 대답을 받아 들였습니다. 내가 찾은 가장 좋은 해결책은 StyledMarker 라이브러리입니다.이 라이브러리는 마커의 사용자 정의 색상을 정의 할 수 있지만 기본 마커 (Google 맵 검색을 할 때 얻는 것)를 사용할 수는 없습니다. 중간에 점), 그것은 마커를 문자 또는 특별한 아이콘으로 제공하는 것 같습니다.

URL 을 사용하여 Google 차트 API 에서 아이콘 이미지를 동적으로 요청할 수 있습니다 .

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

이와 같은 어느 같습니다 화상은 21x34 픽셀 핀 팁 위치에 (10, 34)

또한 별도의 그림자 이미지를 원할 것입니다 (근처 아이콘과 겹치지 않도록).

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

이와 같은 어느 같습니다 화상은 40x37 픽셀 핀 팁 위치에 (12, 35)

MarkerImage 를 구성 할 때 이에 따라 크기와 기준점을 설정해야합니다.

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

"FE7569"를 원하는 색상 코드로 바꾸십시오. 예 :

영감을 얻은 Jack B Nimble의 신용 ;)

Google Maps API v3을 사용하는 경우 setIcon예를 들어

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

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

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

다른 색상 :

• 파란색 마커
• 빨간색 마커
• 보라색 마커
• 노란색 마커
• 녹색 마커

다음 코드를 사용하여 다른 색상으로 기본 마커를 업데이트하십시오.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

다음은 Gooogle Maps API 자체를 사용하는 훌륭한 솔루션입니다. 외부 서비스가 없으며 추가 라이브러리가 없습니다. 또한 맞춤형 모양과 다양한 색상과 스타일을 지원합니다. 이 솔루션은 벡터 맵을 사용하는데,이 API는 googlemaps api 호출 Symbols 입니다.

미리 정의 된 소수의 제한된 기호 외에도 SVG 경로 문자열 ( Spec ) 을 지정하여 모든 모양의 색상을 만들 수 있습니다 .

이를 사용하려면 'icon'표식 옵션을 이미지 URL로 설정하는 대신 기호 옵션이 포함 된 사전으로 설정하십시오. 예를 들어, 표준 마커와 매우 유사한 하나의 심볼을 만들었습니다.

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

형상 키 포인트를 0,0으로 유지하려면 마커 아이콘 중심 매개 변수를 정의하지 않아도됩니다. 다른 경로 예, 점이없는 동일한 마커 :

    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',

그리고 여기에 매우 간단하고 못생긴 색의 깃발이 있습니다.

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

Inkscape (GNU-GPL, 멀티 플랫폼) 와 같은 시각적 도구를 사용하여 경로를 만들 수도 있습니다 . 유용한 힌트 :

• Google API는 단일 경로 만 허용하므로 다른 객체 (정사각형, cercle ...)를 경로로 바꿔 단일 경로로 결합해야합니다. 경로 메뉴의 두 명령
• 경로를 (0,0)으로 이동하려면 경로 편집 모드 (F2)로 이동하여 모든 제어 노드를 선택하고 드래그하십시오. F1으로 객체를 이동해도 경로 노드 좌표는 변경되지 않습니다.
• 참조 점이 (0,0)에 있도록하기 위해 참조 점을 단독으로 선택하고 상단 도구 모음에서 직접 좌표를 편집 할 수 있습니다.
• XML 인 SVG 파일을 저장 한 후 편집기로 파일을 열고 svg : path 요소를 찾아 'd'속성의 내용을 복사하십시오.

그럼 내가 StyledMarker으로 얻을 수 있었던 가장 가까운 것입니다 이 입니다.

가운데의 글 머리 기호는 기본 글 머리 기호만큼 크지 않습니다. StyledMarker 클래스는 단순히이 URL을 빌드하고 Google API에 마커를 만들도록 요청합니다. .

로부터 클래스 사용 예제 사용 "% E2 %의 80 % A2" 와 같이 텍스트로 :

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

라인을 주석 처리하려면 StyledMarker.js를 수정해야합니다.

  if (text_) {
    text_ = text_.substr(0,2);
  }

텍스트 문자열을 2 자로 자릅니다.

또는 원하는 색상으로 기본 이미지를 기반으로 사용자 정의 마커 이미지를 만들고 다음과 같은 코드로 기본 마커를 재정의 할 수 있습니다.

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

vokimon의 답변 을 약간 확장 하여 다른 속성을 변경하는 데 조금 더 편리합니다.

function customIcon (opts) {
  return Object.assign({
    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: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

용법:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

또는 새로운 마커를 정의 할 때 :

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});

안녕하세요, 아이콘을 SVG로 사용하고 색상을 설정할 수 있습니다. 이 코드를 참조하십시오

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            icon: {
                path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>

Google Maps API 버전 3.11부터 Icon객체가 대체됩니다.MarkerImage . 아이콘은 MarkerImage와 동일한 매개 변수를 지원합니다. 나는 심지어 조금 더 직설적 인 것으로 나타났습니다.

예를 들면 다음과 같습니다.

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

자세한 내용은 이 사이트를 확인하십시오

에서 인터넷 익스플로러 , 이 솔루션은 SSL에서 작동하지 않습니다.

콘솔에서 오류를 다음과 같이 볼 수 있습니다.

SEC7111 : HTTPS 보안이에 의해 손상 이 ,

해결 방법 : 여기서 사용자 중 한 명이 SSL 오류를 피하기 위해 URL 경로를 chart.apis.google.com 을 chart.googleapis.com으로 대체 할 것을 제안했습니다 .

다른 사람들이 언급했듯이 vokimon의 답변 은 훌륭하지만 불행히도 한 번에 SymbolPath / SVG 기반 마커가 많은 경우 Google지도가 약간 느립니다.

데이터 URI를 사용하는 것이 훨씬 빠르며 PNG와 거의 같습니다.

또한 전체 SVG 문서이기 때문에 점에 적절한 채워진 원을 사용할 수 있습니다. 경로가 더 이상 왼쪽 상단으로 오프셋되지 않도록 수정되므로 앵커를 정의해야합니다.

이러한 마커를 생성하는 수정 된 버전은 다음과 같습니다.

var coloredMarkerDef = {
    svg: [
        '<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
            '<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
            '<circle cx="11" cy="11" r="3"/>',
        '</svg>'
    ].join(''),
    anchor: {x: 11, y: 41},
    size: {width: 22, height: 41}
};

var getColoredMarkerSvg = function(color) {
    return coloredMarkerDef.svg.replace('{fillColor}', color);
};

var getColoredMarkerUri = function(color) {
    return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};

var getColoredMarkerIcon = function(color) {
    return {
        url: getColoredMarkerUri(color),
        anchor: coloredMarkerDef.anchor,
        size: coloredMarkerDef.size,
        scaledSize: coloredMarkerDef.size
    }
};

용법:

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude),
    icon: getColoredMarkerIcon("#FFF")
});

단점은 PNG 이미지와 마찬가지로 전체 직사각형을 클릭 할 수 있다는 것입니다. 이론적으로 SVG 경로 를 추적하고 MarkerShape 다각형을 생성하는 것은 그리 어렵지 않습니다 .

이 코드를 사용하면 정상적으로 작동합니다.

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

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

결합 심볼 기반 중심의 '●'문자로 그 경로 윤곽을 그립니다 마커를. 원하는대로 점을 다른 텍스트 ( 'A', 'B'등)로 대체 할 수 있습니다.

이 함수는 주어진 텍스트 (있는 경우), 텍스트 색상 및 채우기 색상이있는 마커에 대한 옵션을 반환합니다. 윤곽선에 텍스트 색을 사용합니다.

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            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',
            fillColor: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}

맞춤 Google지도 마커를 만드는 두 가지 방법을 시도합니다. canvg.js를 사용하는이 실행 코드는 브라우저와 가장 잘 호환됩니다. 주석 처리 된 코드는 IE11을 긴급하게 지원하지 않습니다.

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>

나는 vokimon의 그려진 마커를 개선하고 Google지도와 비슷하게 만들기 위해 오랫동안 노력했습니다 (그리고 거의 성공했습니다). 이것은 내가 얻은 코드입니다.

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

또한 0.8로 확장했습니다.

경로를 chart.googleapis.com으로 변경하면 SSL이 작동하지 않습니다.

swift와 Google Maps Api v3을 사용하면 이것이 가장 쉬운 방법이었습니다.

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

그것이 누군가를 돕기를 바랍니다.

이들은 맞춤 원형 마커입니다

small_red :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

small_yellow :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

small_green :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

그들은 9x9 PNG 이미지입니다.

페이지에 있으면 드래그하여 실제 png 파일을 만들 수 있습니다.

컬러 코드도 사용할 수 있습니다.

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });

때로는 정말 간단한 것이 복잡한 것으로 대답 할 수 있습니다. 위의 답변 중 하나라도 잘못되었다고 말하지는 않지만 다음과 같이 간단하게 수행 할 수 있습니다.

나는이 질문이 오래되었다는 것을 알고 있지만 누군가가 핀이나 마커 색상으로 변경하고 싶다면 https://developers.google.com/maps/documentation/android-sdk/marker 설명서를 확인 하십시오.

마커를 추가 할 때 단순히 아이콘 속성을 설정하십시오.

GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
    .position(latLng)
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

거기 에서 선택할 수있는 10 개 기본 색상 . 그것이 충분하지 않으면 (간단한 해결책) 아마도 다른 답변에서 주어진 더 복잡한 것으로 가서 더 복잡한 요구를 충족시킬 것입니다.

추신 : 나는 다른 대답으로 비슷한 것을 썼 으므로 그 대답을 언급해야하지만, 마지막으로 그렇게했을 때, 답변이 너무 짧기 때문에 (이와 같이) 답변을 게시하라는 요청을 받았습니다.