Google Maps APIを活用、Google地図を緯度経度指定からWEBページに埋め込みする

APIの活用

地図の中心となる緯度経度を指定し、地図の拡大レベルを指定します。

緯度経度情報は下記のサイトで取得することができます。

座標として提示される35.710208, 139.812734という数字が緯度経度情報です。
Geocoding


池袋駅を中心とした地図を取得してみます。


html
ほとんどがスクリプトでbodyは1行だけ・・・。
中心のマーカーは池袋駅ですが、追加マーカーとして江古田駅を指定しています。
ズームをいじっていないので、スライドしないと追加された江古田駅マーカーは見えないです。

<meta charset="UTF-8">
<title>Google Maps API</title>

<!-- 【１】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【２】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize(){
	
	//■地図を表示する緯度経度を指定する
	var latlng = new google.maps.LatLng(35.728926,139.71038);
	
	//■地図必須プロパティを設定
	var myOptions={
		
		//■ズームレベルの指定0〜17
		zoom:14,

//■地図の中心を指定（上記で設定の緯度経度laglng)
center:latlng,

//■地図のタイプ設定
//　ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル
 mapTypeId: google.maps.MapTypeId.ROADMAP
 
	};//地図プロパティここまで
	
	//■<div id="map_canvas">と結びつけて、その領域に地図を描く
	var map=new google.maps.Map(document.getElementById("map_canvas"),myOptions);
	
	//■中心にマーカーの表示
	var marker1= new google.maps.Marker({
		position: latlng,
		title:"池袋駅"
	});
	marker1.setMap(map);
	
//■マーカーの追加表示（緯度軽度指定の場合）
var myLatlng=new google.maps.LatLng(35.737376, 139.672756);	
var marker2=new google.maps.Marker({
	position:myLatlng,
	title:"江古田駅"
});
marker2.setMap(map);

//■マーカーをクリックしたら、情報ウィンドウを表示
var marker1text = 'ここは<span style="color:#f00;">池袋駅</span>です'
var infowindow1=new google.maps.InfoWindow({
	content:marker1text,
	maxWidth:200
});
google.maps.event.addListener(marker1, 'click', function(){
infowindow1.open(map,marker1);
});

var marker2text='ここは<span style="color:#f00;">江古田駅</span>です'
var infowindow2=new google.maps.InfoWindow({
	content: marker2text,
	maxWidth:200
});
google.maps.event.addListener(marker2, 'click', function(){
infowindow2.open(map,marker2);
});
	
}//initialize()

</script>		
</head>
<body onload ="initialize()">
<!-- 地図はここに描画される-->
<div id="map_canvas" style="width:640px; height:480px;"></div>
</body>
</html>

追加表示したマーカー部分までスライドして見せるとこのようになります。
江古田をマーカー追加しています。


忍者にアップロードしたデータ

http://latte.moto-chika.com/googlemap/googlemaps.html
マーカーをクリックすると吹き出しを表示します。