虚ろなる破壊への夢

　前ページにてGoogleMapを表示することに成功しました。 次は自分が望む地域を表示したいでしょう。これは緯度経度を指定してマップの表示位置を移動させます。

---

表示位置

前のページでページ内にGoogleマップを貼り付ける場合として以下のサンプルコードを掲載しました。

<div id="gmap" style="width:500px; height:300px" style="margin:0px;"></div>
<script type="text/javascript">
//<![CDATA[
	window.onload = function(){
			map = new GMap2(document.getElementById("gmap"));
			map.setCenter(new GLatLng(35.67392 ,139.768) , 12);
			var posv = new GLatLng( 35.67392  , 139.768 );
			var setmarker =  new GMarker( posv );
			map.addOverlay( setmarker ) ;
				
			ctrlObj = new GLargeMapControl();
			map.addControl(ctrlObj);
	}
//]]>
</script>

　ここから分かるように、マップ表示位置として定義したDIVのID要素を map = new GMap2(document.getElementById("gmap")); の行でGoogleMapオブジェクトと関連付けています。 これにより id=gmap のDIVがgoogleMapの表示エリアとされました。
　次に、 map.setCenter(new GLatLng(35.67392 ,139.768) , 12); の行にてマップ表示の中心位置を設定しています。GLatLngオブジェクトに緯度・経度を設定して、 setCenter関数の第一引数として渡しています。また、第二引数の12はマップのズームレベルになります。ズームレベルは 0-19 となっており、数値が上がる程ズームするようになっています。

	var posv = new GLatLng( 35.67392  , 139.768 );
	var setmarker =  new GMarker( posv );
	map.addOverlay( setmarker ) ;

　上記の3行ではマップ上に表示するマーカーの位置を設定しています。 Gmarkerオブジェクトに設置位置の緯度経度を指定したGLatLngオブジェクトを渡し、表示するMapオブジェクトのaddOverLayメソッドに引数として渡してやれば表示がなされます。

	ctrlObj = new GLargeMapControl();
	map.addControl(ctrlObj);

　最後の2行はマップにコントロールを追加しています。GoogleMapの左上についているスライダーバー等です。

　コードを辿っていきましたが、結果としてマップの中心位置を指定してやれば希望の場所を表示できるという事です。 では富士山を中心としてマップを表示してみたいと思います。 富士山山頂の緯度経度は（35.362848015937125,138.73089909553528）となります。

<div id="gmap" style="width:500px; height:300px" style="margin:0px;"></div>
<script type="text/javascript">
//<![CDATA[
	window.onload = function(){
			map = new GMap2(document.getElementById("gmap"));
			map.setCenter(new GLatLng(35.362848015937125 ,
					138.73089909553528) , 12);
	}
//]]>
</script>