マーカーを表示する

　地図上の位置（ポイント）を示すのに使われるのがマーカーです。Google Mapsでは標準で位置を示すアイコンが用意されています（独自のマーカーにすることもできます。API Ver 2.61以降ではマーカーをドラッグして移動させることもできます）。この標準のマーカーを表示させるにはGMarker()を使います。最初の引数にマーカーの位置、次がアイコン画像オブジェクトを指定します。アイコン画像オブジェクトを指定しない場合にはデフォルトのマーカーが使われます。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 5);
function setMarker()
{
marker = new GMarker(new GPoint(138.73123168945312, 35.35657620196121));
map.addOverlay(marker);
 }
//]]>
</script>
<form>
<input type="button" value="マーカーを追加" onClick="setMarker()" /><br />
</form>
</body>
</html>

　上記のサンプルではマーカーを追加しましたが、マーカーを削除することもできます。特定のマーカーを削除するにはremoveOverlay()を使います。引数には削除したいマーカーオブジェクトを指定します。全てのマーカーを削除したい場合にはclearOverlays()を使います。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 5);
function setMarker()
{
marker = new GMarker(new GPoint(138.73123168945312, 35.35657620196121));
map.addOverlay(marker);
}
function removeMarker()
{
map.removeOverlay(marker);
 }
function clearMarker()
{
map.clearOverlays();
 }
//]]>
</script>
<form>
<input type="button" value="マーカーを追加" onClick="setMarker()" />
<input type="button" value="マーカーを削除" onClick="removeMarker()" />
<input type="button" value="マーカーを全て削除" onClick="clearMarker()" /><br />
</form>
</body>
</html>

　標準のマーカーでなく独自のマーカーを表示させるには、あらかじめ表示させる画像を用意しておきます。PNG形式にしておくと、αチャンネルが反映されるので、半透明合成などができます。Photoshopの場合は透明レイヤーの上にマーカー画像を描いてからWeb用に保存を選択します。PNG-24を選択し透明部分のチェックを入れてから保存します。
　マーカー画像の用意ができたらGIcon()でマーカーオブジェクトを作成します。作成したマーカーオブジェクトのimageプロパティに画像のURLを指定します。画像のサイズはiconSizeプロパティに指定します。画像によっては示す位置を微妙にずらしたい場合もあります。このような場合にはアンカーポイントを指定することができます。アンカーポイントはiconAnchorプロパティにGPoint()で横方向と縦方向のアンカー位置を指定します。
　準備ができたらGMarker()の２番目の引数に作成したマーカーオブジェクトを指定します。最後にaddOverlay()を使って地図上に独自マーカーを表示します。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 5);
function setMarker()
{
marker = new GIcon();
marker.image = "hand.png";
marker.iconSize = new GSize(64, 64);
marker.iconAnchor = new GPoint(62, 72);
markerPoint = new GMarker(new GPoint(138.73123168945312, 35.35657620196121), marker);
map.addOverlay(markerPoint);
 }
//]]>
</script>
<form>
<input type="button" value="独自マーカーを追加" onClick="setMarker()" />
</form>
</body>
</html>

　次項ではイベント処理を追加して地図がドラッグされたら座標を表示するようにしてみます。

[第七章　8:イベント処理を行うへ]
[目次へ]

(2006.1.24, 2006.9.2追加)