「GoogleMaps API V3」 の使い方その1

「GoogleMaps API」もバージョンが3.0になってからしばらく経ちますが、「GoogleMaps API V3」を使う機会がありましたので 「GoogleMaps API V3」について数回に分けてチュートリアルを載せていきます。
今回は最初として、簡単な地図のみを表示することを行います。(JR福井駅を中心とした地図)

<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script>
<script type="text/javascript">
function initialize() {
	// Google Mapで利用する初期設定用の変数
	var latlng = new google.maps.LatLng(36.062092, 136.223323);	// JR福井駅の緯度・経度
	var mapOptions = {
		zoom: 14,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};
	// GoogleMapの生成
	var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
</head>
<body onload="initialize()">
	<div id="map" style="width: 300px; height: 300px;"></div>
</body>
</html>

手順としては以下の様に行います。

1)Google Maps API を読み込む

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script>

headタグ内に上記のように宣言します。
「sensor」パラメータはこのHTMLがユーザー位置情報の取得にセンサーを使用するかどうかを示すためのもので、
必ず指定しなければなりません。 この場合は位置情報は必要ありませんので、「false」と指定します。

2)bodyタグ内に地図を表示する領域をdivタグで宣言する

<body onload="initialize()">
	<div id="map" style="width: 300px; height: 300px;"></div>
</body>

bodyタグの中にdivタグで縦・横300pxの領域を、idを「map」として宣言します。

3)Google Maps APIに必要なオプションを宣言する

	// Google Mapで利用する初期設定用の変数
	var latlng = new google.maps.LatLng(36.062092, 136.223323);	// JR福井駅の緯度・経度
	var mapOptions = {
		zoom: 14,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};

最初の「google.maps.LatLng」はパラメータとして渡される緯度・経度を「LatLng」クラスのデータに変換します。 次は、GoogleMapオブジェクトを生成するためのパラメータですが、最小限必要な地図の解像度「zoom」、 地図の表示形式「mapTypeId」、地図の中心の緯度・経度「center」を宣言します。
(基本的には必須のもののみで取りあえず地図の表示はできます)
パラメータはその他以下の様なものがあります。ここに示したもの以外のオプションがあります。詳しくは以下のURLを参照してください。

パラメータデータタイプ内容
backgroundColor string 地図の DIV の背景に使用される色。
center LatLngクラス 地図の最初の中心。※必須
mapTypeControl boolean マップ タイプ コントロールの有効/無効(初期時の状態)。
mapTypeControlOptions MapTypeControlOptionsクラス マップ タイプ コントロールの最初の表示オプション。
mapTypeId MapTypeIdクラス 地図の最初の mapTypeId。※必須
navigationControl boolean ナビゲーション・コントロールの有効/無効(初期時の状態)。
navigationControlOptions NavigationControlOptionsクラス ナビゲーション・コントロールの最初の表示オプション。
noClear boolean true の場合、地図の DIV の内容を消去してはいけません。
scaleControl boolean スケール コントロールの有効/無効(初期時の状態)。
scaleControlOptions ScaleControlOptionsクラス スケール コントロールの最初の表示オプション。
scrollwheel boolean 地図上でのスクロール・ホイールを使用したズーム指定。(デフォルトでは、スクロール・ホイールは有効)
zoom number 地図の最初のズームレベル。※必須

4)bodyタグのonloadイベント時に、宣言されたオプションをパラメータとして渡し、GoogleMapの生成を行う。

    // GoogleMapの生成
	var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);

GoogleMapのコンストラクタ「google.maps.Map」のパラメータはHTMLのコンテナ(DIVタグの要素)と3)で指定されたオプションを渡します。 この処理により「id="map"」のDIVタグに地図が表示されます。

尚、「GoogleMaps API V3」について本家の説明がありますので、参考にしてください。
Google Maps JavaScript API V3


■関連記事
「GoogleMaps API V3」の使い方その2
「GoogleMaps API V3」の使い方その3(マーカーの表示)
「GoogleMaps API V3」の使い方その4(イベント)
「GoogleMaps API V3」の使い方その5(続イベント)
「GoogleMaps API V3」の使い方その6(続々イベント)
「GoogleMaps API V3」の使い方その7(ポリライン・ポリゴン)
「GoogleMaps API V3」の使い方その8(ジオコーディング)
「GoogleMaps API V3」の使い方その9(ルート検索)
「GoogleMaps API V3」の使い方その10(ルート検索2)
「GoogleMaps API V3」の使い方その11(さらにInfowindow)

ページのトップへ戻る