おやじプログラマー日記 : 「GoogleMap API V3」の使い方その１

「GoogleMap API」もバージョンが３．０になってからしばらく経ちますが、「GoogleMap API V3」を使う機会がありましたので「GoogleMap API V3」について数回に分けてチュートリアルを載せていきます。

今回は最初として、簡単な地図のみを表示することを行います。（JR福井駅を中心とした地図）

<head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" 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>

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

１）Google Maps API を読み込む
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script>
headタグ内に上記のように宣言します。「sensor」パラメータはこのHTMLがユーザー位置情報の取得にセンサーを使用するかどうかを示すためのもので、必ず指定しなければなりません。
この場合は位置情報は必要ありませんので、「false」と指定します。
最近までこの方法でOKでしたが、GoogleにおいてGoogleMapを使用するKEYを取得しないと、画面上のマップが表示されなくなりました。
そのため、js?sensor=false を js?key=(取得したkeyコード) の様に変更が必要です。

２）bodyタグ内に地図を表示する領域をdivタグで宣言する
<body onload="initialize()"> <div id="map" style="width: 300px; height: 300px;"></div> </body>
bodyタグの中にdivタグで縦・横300pxの領域を、idを「map」として宣言します。

３）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を参照してください。

MapOptions オブジェクト

パラメータ	データタイプ	内容
`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の生成を行う。
// GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
GoogleMapのコンストラクタ「google.maps.Map」のパラメータはHTMLのコンテナ（DIVタグの要素）と３）で指定されたオプションを渡します。
この処理により「id="map"」のDIVタグに地図が表示されます。初回としては簡単な地図の表示でしたが、今後はいろいろな処理について書いていきたいと思います。
尚、「GoogleMap API V3」について本家の説明がありますので、参考にしてください。
Google Maps JavaScript API V3