マーカーの置かれた地図サービス：アイコンの種類を変更する

以下は，好きな任意のアイコンを使って地図を表示するプログラムです．このコードは以前のものとかわりません．

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<script src="http://maps.google.com/maps?file=api&v=2&key=（キーを入力）"
        type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript" src="gmarker_iconchange.js" charset="utf-8"></script>
	
	<title>Google Maps Event Test Page</title>
</head>
<body>
	<div id="mymap" style="width: 500px; height: 400px"></div>
	
</body>
</html>

以下は，JavaScriptのコードです．マーカを任意のものに設定して表示させています．クリックすると情報ウィンドウを表示します．

var map;

function startUp(){
	map= new GMap2(document.getElementById("mymap"));
	map.setCenter( new GLatLng(35.70749253887843 , 139.71373558044434), 13 );
	map.addControl(new GLargeMapControl());
	map.addControl(new GScaleControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new GOverviewMapControl());


    var icon = new GIcon();
      icon.image = "http://labs.google.com/ridefinder/images/mm_20_green.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);
      icon.infoWindowAnchor = new GPoint(5, 1);


	var mk = new GMarker((new GLatLng(35.70749253887843 , 139.71373558044434)), icon);
	map.addOverlay(mk);
	GEvent.addListener( mk, "click", showInfo);
	
	function showInfo() {
		mk.openInfoWindowHtml( " ここにあります！" );
	}		
}

onload = startUp;
onunload = GUnload;

ウェブサイトはこちら

アイコンの設定部分は，以下のような意味になります．

var icon = new GIcon();
    icon.image = "アイコン画像のURL";
    icon.shadow = "アイコンの影画像のURL";
    icon.iconSize = new GSize(アイコン画像の幅, 高さ);
    icon.shadowSize = new GSize(アイコン影画像の幅, 高さ);
    icon.iconAnchor = new GPoint(アイコンの中心点のx位置, y位置);
    icon.infoWindowAnchor = new GPoint(画像中で吹き出しが表示されるx位置, y位置);

アイコンの種類を変更する

アイコンの種類を変更する

情報ウィンドウに画像ファイルを表示させる

演習課題