「GoogleMaps API V3」APIの基礎な使い方

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

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

01<head>
02<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
03<script type="text/javascript">
04function initialize() {
05    // Google Mapで利用する初期設定用の変数
06    var latlng = new google.maps.LatLng(36.062092, 136.223323); // JR福井駅の緯度・経度
07    var mapOptions = {
08        zoom: 14,
09        mapTypeId: google.maps.MapTypeId.ROADMAP,
10        center: latlng
11    };
12    // GoogleMapの生成
13    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
14}
15</script>
16</head>
17<body onload="initialize()">
18    <div id="map" style="width: 300px; height: 300px;"></div>
19</body>
20</html>

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

１）Google Maps API を読み込む

`1`	`<script` `type="text/javascript"` `src="http://maps.google.com/maps/api/js?key=MyKeyCode"` `charset="utf-8"></script>`

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

最近までこの方法でOKでしたが、GoogleにおいてGoogleMapを使用するKEYを取得しないと、画面上のマップが表示されなくなりました。
そのため、js?sensor=false を js?key=(取得したkeyコード) の様に変更が必要です。

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

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

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

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

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

最初の「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`	地図の最初のズームレベル。※必須

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

`1`	`// GoogleMapの生成`

`2`	`var` `gmap =` `new` `google.maps.Map(document.getElementById("map"), mapOptions);`

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

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

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

１）Google Maps API を読み込む

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

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

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

■関連記事

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