Google Maps カスタムアイコン

好みのアイコンは使いたいもの。下のソースを見た方が早いと思うけど、GIconのコンストラクタにはびっくりした。欲しいコンストラクタがまさにあった。考えてみれば、確かに欲しい人は多そう。考えられてるなぁ。

icon.iconSizeとicon.shadowSizeはそれぞれが表示される大きさ。画像の大きさと同じにすればそのままの表示だし、値を小さくすれば縮小されて表示される。icon.iconAnchorは、このアイコンが指し示す部分（上の例だとアイコン下部のとがった部分）が画像の左上から何pixelのところかを指定する。

<div id="markerMap" style="width:500px;height:200px;"></div>
<script>
  var map = new GMap2(document.getElementById("markerMap"));
  map.addControl(new GMapTypeControl(1));
  map.setCenter(new GLatLng(35.5577, 139.7249), 17);


  //黄色のアイコン
  var point = new GLatLng(35.5577, 139.7249);
  var icon = new GIcon(G_DEFAULT_ICON,
       "http://www.geocities.jp/genwasgen/img/markeryellow.png");
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);

  //赤色の小さいアイコン
  var point = new GLatLng(35.5577, 139.7259);
  var icon = new GIcon();
  icon.image  = "http://labs.google.com/ridefinder/"
                  +"images/mm_20_red.png";
  icon.shadow = "http://labs.google.com/ridefinder/"
                  +"images/mm_20_shadow.png";
  icon.iconSize   = new GSize(12, 20);
  icon.shadowSize = new GSize(22, 20);
  icon.iconAnchor = new GPoint(6, 20);
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);
</script>

ついでにアイコンの色々。

	http://www.google.com/intl/en_ALL/mapfiles/dd-start.png
	http://www.google.com/intl/en_ALL/mapfiles/dd-end.png
	http://www.google.com/intl/en_ALL/mapfiles/arrow.png
	http://www.google.com/intl/en_ALL/mapfiles/arrowshadow.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_0.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_3.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_117.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_walk_0.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_walk_3.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_walk_117.png
	http://labs.google.com/ridefinder/images/mm_20_purple.png
	http://labs.google.com/ridefinder/images/mm_20_yellow.png
	http://labs.google.com/ridefinder/images/mm_20_yellow.png
	http://labs.google.com/ridefinder/images/mm_20_blue.png
	http://labs.google.com/ridefinder/images/mm_20_white.png
	http://labs.google.com/ridefinder/images/mm_20_white.png
	http://labs.google.com/ridefinder/images/mm_20_green.png
	http://labs.google.com/ridefinder/images/mm_20_black.png
	http://labs.google.com/ridefinder/images/mm_20_orange.png
	http://labs.google.com/ridefinder/images/mm_20_gray.png
	http://labs.google.com/ridefinder/images/mm_20_brown.png
	http://labs.google.com/ridefinder/images/mm_20_shadow.png
	http://maps.google.com/mapfiles/kml/pushpin/wht-pushpin.png
	http://maps.google.com/mapfiles/kml/pushpin/red-pushpin.png
	http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
	http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png
	http://www.google.com/apis/maps/documentation/markermanager/sun.png
	http://www.google.com/apis/maps/documentation/markermanager/sun-shadow.png
	http://www.google.com/apis/maps/documentation/markermanager/rain.png
	http://www.google.com/apis/maps/documentation/markermanager/rain-shadow.png
	http://www.google.com/apis/maps/documentation/markermanager/snow.png
	http://www.google.com/apis/maps/documentation/markermanager/snow-shadow.png
	http://www.google.com/apis/maps/documentation/markermanager/storm.png
	http://www.google.com/apis/maps/documentation/markermanager/storm-shadow.png
	http://maps.google.com/help/maps/streetview/images/man_arrow-10.png
	http://www.google.com/help/hc/images/maps_human.png
	http://
	http://
	http://