Googleマップ：マーカーのデフォルトの赤色を変更してラベルを追加する方法

Question

これは最初は簡単に行うべきだと思います。しかし、解決策を取らずにインターネットで検索するのに何時間もかかります。

私は以下のように、ラベルをGoogleマップ上でマーカーを追加することができます。

// Adding a marker to the map 
    var marker1 = new google.maps.Marker({ 
    position: new google.maps.LatLng(22.48, 114.20), 
    map: map, 
    title: 'My House', 
    label: { 
     text: 'A', 
     color: '#79E149' 
    } 
}); 

デフォルトの色は赤です。

私の質問： マーカーの赤色を他の色（たとえば緑色）に変更するにはどうすればよいですか？

私はほとんどの答えは、たとえば、外部のアイコンを使用することをお勧めことに気づい：

// Adding a marker to the map 
    var marker1 = new google.maps.Marker({ 
    position: new google.maps.LatLng(22.48, 114.20), 
    map: map, 
    title: 'My House', 
    **icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',** 
    label: { 
     text: 'A', 
     color: '#79E149' 
    } 
}); 

しかし： 1.アイコンのこの種を使用するときにラベルが表示されません。

2. URLは後で変更される可能性があるため、実際には外部画像を使用しません。実際に多くのアイコンは、例えば、すでに消えているようだ： http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png

おかげで、宜しく

アレックス

Answer 1

1. をお試しください79E149）ので、マーカーとブレンドする
2. ラベルを貼りたい場合は、マーカーに「ドット」を付ける必要はないでしょう（マーカーアイコンの名前を「緑色のドット」から「緑色」に変更します）。
3. アイコンのLabelOriginは、その特定のマーカー/ラベルの組み合わせのために間違っている

proof of concept fiddle

コードスニペット：

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(22.48, 114.20), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    // Adding a marker to the map 
 
    var marker1 = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(22.48, 114.20), 
 
    map: map, 
 
    title: 'My House', 
 
    icon: { 
 
     url: 'http://maps.google.com/mapfiles/ms/icons/green.png', 
 
     labelOrigin: new google.maps.Point(15, 10) 
 
    }, 
 
    label: { 
 
     text: 'A', 
 
     color: 'black' 
 
    } 
 
    }); 
 
    var marker2 = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(22.49194, 114.204426), 
 
    map: map, 
 
    title: 'My Other House', 
 
    icon: { 
 
     url: 'http://maps.google.com/mapfiles/ms/icons/orange.png', 
 
     labelOrigin: new google.maps.Point(15, 10) 
 
    }, 
 
    label: { 
 
     text: 'B', 
 
     color: 'black' 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

Answer 2

＃（あなたのラベルテキストが緑色である。この

GoogleMap googlemap; 

googlemap.addMarker(new MarkerOptions() 
.position(new LatLng(22.48, 114.20)) 
.title("My House").snippet("A").icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN)));