「GoogleMap API V3」 の使い方その１
「GoogleMap API」もバージョンが３．０になってからしばらく経ちますが、「GoogleMap API V3」を使う機会がありましたので 「GoogleMap API V3」について数回に分けてチュートリアルを載せていきます。
今回は最初として、簡単な地図のみを表示することを行います。（JR福井駅を中心とした地図）
手順としては以下の様に行います。
１）Google Maps API を読み込む
headタグ内に上記のように宣言します。「sensor」パラメータはこのHTMLがユーザー位置情報の取得にセンサーを使用するかどうかを示すためのもので、 必ず指定しなければなりません。
この場合は位置情報は必要ありませんので、「false」と指定します。
最近までこの方法でOKでしたが、GoogleにおいてGoogleMapを使用するKEYを取得しないと、画面上のマップが表示されなくなりました。
そのため、js?sensor=false を js?key=(取得したkeyコード) の様に変更が必要です。
２）bodyタグ内に地図を表示する領域をdivタグで宣言する
bodyタグの中にdivタグで縦・横300pxの領域を、idを「map」として宣言します。
３）Google Maps APIに必要なオプションを宣言する
最初の「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の生成を行う。
GoogleMapのコンストラクタ「google.maps.Map」のパラメータはHTMLのコンテナ（DIVタグの要素）と３）で指定されたオプションを渡します。
この処理により「id="map"」のDIVタグに地図が表示されます。 初回としては簡単な地図の表示でしたが、今後はいろいろな処理について書いていきたいと思います。
尚、「GoogleMap API V3」について本家の説明がありますので、参考にしてください。
Google Maps JavaScript API V3
■関連記事
⇒「GoogleMap API V3」 の使い方その２
⇒「GoogleMap API V3」 の使い方その３（マーカーの表示）
⇒「GoogleMap API V3」 の使い方その４（イベント）
⇒「GoogleMap API V3」 の使い方その５（続イベント）
⇒「GoogleMap API V3」 の使い方その６（続々イベント）
⇒「GoogleMap API V3」 の使い方その７（ポリライン・ポリゴン）
⇒「GoogleMap API V3」 の使い方その８（ジオコーディング）
⇒「GoogleMap API V3」 の使い方その９（ルート検索）
⇒「GoogleMap API V3」 の使い方その10（ルート検索2）
⇒「GoogleMap API V3」 の使い方その11（さらにInfowindow）
| 
コメント