「30分で作れる Google Maps API アプリケーション」【基礎編/後編】

[Developer Program チーム]

■目次

【後編】
-基本的な設定（初期位置、コントロール、表示サイズ）
-次のステップへ


【基本的な設定 -初期位置】

前回はGoogle Maps APIを使い、地図を表示するところまで説明しました。今回は
もう少し複雑な例を説明しましょう。まずは表示される地図の初期位置を指定して
みましょう。

Google Maps APIでは、位置を指定するために緯度・経度の情報を利用します。
そこで、まずは表示したい位置の緯度・経度を調べる必要がありますが、これは
Googleマップを利用して調べることができます。

///緯度・経度の調べ方///

Google マップで希望する場所の地図を表示します。希望の場所が表示できたら、
ページ右上の「このページのリンク」をクリックしてください。クリックすると
ボックスがすぐ下に表れます。このボックスの上段「このリンクをメールに貼り
付けて地図を共有できます」のリンクをコピーしてエディタにペーストしてくだ
さい。長い文字列の中の２つの数字が緯度と経度です。
たとえばll=35.695944,139.702084という記述であれば35.695944が緯度、
139.702084が経度になります。

参考画像
http://developer-round-table.googlegroups.com/web/maps05.jpg
/////////////////////////////


表示したい位置の緯度・経度が分かったら、さきほどのサンプルコードに記された
緯度・経度の数値を今調べた数値に置き換えます。サンプルコードの緯度・経度は
次のコードの中の２つの数値です。

---------------------------------------------------------------------------
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
---------------------------------------------------------------------------

最後の引数の「13」という数値は地図の縮尺の指定です。この数値も変えてみてく
ださい。

では、変更したコードを保存し、ファイルを再びGoogle Page Creatorにアップ
します。あなたのGoogle Page CreatorのURL
(例 http://abcdefg.googlepages.com/sample.html)を再び表示して、希望通りの
地点が表示されれば、初期位置の指定は成功です。

参考画像
http://developer-round-table.googlegroups.com/web/maps06.jpg

【基本的な設定 -コントロール】

さて、これまで表示してきた地図と通常のGoogle マップとでは見た目に異なる点が
あります。その１つがコントロールです。Googleマップには画面左上に 地図の縮尺
や位置を操作するためのバーやボタンがありますが、これをコントロールと呼んで
います。しかし、このコントロールは今の地図にはありません。これでは不便です
ね。そこでコントロールを追加しましょう。これはたった１行をサンプルコードに
加えるだけです。

--------------------------------------------------------------------------
map.addControl(new GLargeMapControl());
--------------------------------------------------------------------------

この1行を以下の2行の間に加えます。

--------------------------------------------------------------------------
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
--------------------------------------------------------------------------

すると、加えた結果はこのようになります。

--------------------------------------------------------------------------
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
--------------------------------------------------------------------------

このコードをファイル保存し、再びPage Creatorでアップロードすれば、地図に
コントロールが表示されます。これで、地図を見る人が縮尺などを自在に操作でき
ますね。

参考画像
http://developer-round-table.googlegroups.com/web/maps07.jpg

【基本的な設定 -地図の大きさ】

自分のサイトに地図を表示しようとした場合、地図の大きさが決められないと
デザイン上困ったことになります。そこで、表示される地図の大きさを指定する
必要があります。

これは、以下の1行のwidthとheightを変更するだけです。適当な値に変更して
ファイルを保存し、Page Creatorでアップロードしてください。アップロード後は
再びブラウザで地図を表示してみましょう。

--------------------------------------------------------------------------
<div id="map_canvas" style="width: 500px; height: 300px"></div>
--------------------------------------------------------------------------

数値を変えれば、ページ丸ごとを地図として表示することも、ページの一要素
として小さく表示することもできます。

参考画像
http://developer-round-table.googlegroups.com/web/maps08.jpg

【次のステップへ】

Google Maps APIには、今回ご紹介した基本的な使い方から、より高度で自由自在
に地図を使いこなすテクニックまで様々なAPIの利用方法があります。自らの
ホームページに会社の場所や自宅の場所などを表示するだけでなく、より高度な
使い方についてもぜひお調べてみてください。


【Google Maps API の関連情報】

http://code.google.com/apis/maps/
- Google Maps API のオフィシャルページ（英語）です。

http://googlemapsapi.blogspot.com/
- Google Maps API のオフィシャルブログ（英語）です。

http://groups.google.com/group/Google-Maps-API
- Google Maps API についてのオフィシャルなGoogle グループ（英語）です。

http://groups.google.com/group/Google-Maps-JP
- Google マップについてのオフィシャルな日本語Google グループです。

http://googlejapan.blogspot.com/2007/10/2-vol1_05.html
- Google Maps API をテーマとした日本語のディスカッションです。