- 2008年11月22日 15:06
- 最新トレンド情報
最近、Googleの「ストリートビュー」で自宅の近所や
まだ行ったことのないところを探索して楽しんでます。 
本当に遊び心があるというか、Googleが考えるWebの世界に
心がわくわくしてくるのは、こんな面白いものを自分も作ってみたいっ！
と感じてならないからです。 
今回はGoogleMapを作成してみます。
難しそうに見えて実は結構簡単に作れちゃうんです。
これから紹介する内容はHTMLとJavascriptを少しでも使ったことがある方を対象にしています。
まずGoogleMapを作成するためにはGoogleで提供されているGoogleMaps
APIキーを取得しなければなりません。
これにはGoogleアカウントが必要で、
URL: https://www.google.com/accounts/NewAccount
から無料で作成できます。
その後、GoogleMapを利用したいURLを上のサイト内で入力すると
GoogleMapsAPIキーを取得できます。
さて、GoogleMapを作成する手順としては、
- script タグを使ってGoogleMapsAPI Javascript をページ内に取り込む。
- ページ内にマップを入れるための領域を確保する。
- Map オブジェクトを作成する。
- 指定した地理上の位置（緯度、経度）を中心にマップを配置する。
先ほど紹介したGoogleMapsAPIキーを元に規定のGoogleサイトからJavascript
ファイルを読み込みます。
とてもシンプルですよね。順をおってみていきましょう。 
(以降のプログラムの画像は、クリックで拡大します。)
1. script タグを使ってGoogleMapsAPI Javascript をページ内に取り込む。
5行目から6行目にかけての " key = ～ " がGoogleMapsAPIキーです。
2. ページ内にマップを入れるための領域を確保する。
60行目のようにdivタグにid属性で領域を確保します。
今回 は' map ' という名前を領域につけています。
3. Map オブジェクトを作成する。
96行目の右辺では、2 で確保した領域（map）にMapオブジェクトを作成し、左辺の変数
map に参照を渡しています。
4. 指定した地理上の位置（緯度、経度）を中心にマップを配置する。
GLatLng( ) は緯度( Latitude )と経度( Longitude)を扱うオブジェクトであり、最後の「16」
は「尺度」を表します。緯度は赤道から北へ0～90、南へ0～－90 を指定します。
ではここまでの実行結果をみてみましょう。
地図はできましたが地図があるだけで今ひとつ面白くありませんね。
サンプル1
(リンク先の関係上、警告が出ますが問題ありません)
仕上げに以下のオプションをつけてみることにします。
オプション2. 画面右上に地図と航空写真の切り替え機能
オプション3. 広域表示を行う小さい地図を重ねて表示する機能
オプション4.拡大・縮小を滑らかに行う機能
オプション5.マウスのホイールで拡大・縮小を行う機能
サンプル2
(リンク先の関係上、警告が出ますが問題ありません)
いかがでしたか？一見難しそうでも、使い方はそうでもないと思います。
他にも色んな機能がありますのでみなさんもGoogleをもっと楽しんでみてはいかがでしょうか！
また今度もGoogleの機能を紹介していきたいと思います。