マップにセンターマーカーを表示する

説明

マップの中央を示すマーカー（センターマーカー）を表示するには方法が２つあります。1つはdivタグを新たに生成しマップのコンテナに入れ込む方法です。この場合document.createElement()を使ってdivタグを生成し、スタイルシートによって表示位置や表示するマーカー画像を指定します。続きは書籍で、どうぞ...
逆引きGoogle Maps APIリファレンス 　詳しい解説などは逆引きGoogle Maps APIリファレンス、またはGoogle Maps APIリファレンスを参照してください。

サンプルコード [実行]

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Sample</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
map = new GMap2(document.getElementById("gmap"));
map.setCenter(new GLatLng(37, 138), 6);
map.addControl(new GLargeMapControl());
var markObj = document.createElement("div");
var mapW = parseInt(map.getContainer().style.width);
var mapH = parseInt(map.getContainer().style.height);
var markW = 31; // センターマークの横幅（ピクセル数）
var markH = 31; // センターマークの縦幅（ピクセル数）
var x = (mapW - markW) / 2; // センターマークの中心位置（X座標）
var y = (mapH - markH) / 2; // センターマークの中心位置（Y座標）
markObj.style.position = "absolute";
markObj.style.top = y+"px";
markObj.style.left = x+"px";
markObj.style.backgroundImage = "url(centerMark.gif)";
markObj.style.width = markW+"px";
markObj.style.height = markH+"px";
markObj.style.opacity = 0.5;
map.getContainer().appendChild(markObj);
}
//]]>
</script>
</head>
<body>
<div id="gmap" style="width: 500px; height: 400px"></div>
</body>
</html>