色々なボタン


サイトマップ


Links


PR


スポンサーサイト

--年 --月--日
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Google Maps API V3 を使ってみる

2010年 05月18日
Google Map API V3を使用してみます。


◆Version3になって変わったこと
APIキーが不要になった
いちいちホームページ事にAPIキーを
取得しなくて良くなったので、とっても便利になりました。

iPhone/Androidへの対応
スマートホン向けに地図を高速に表示できる様になりました。

JavaScriptの書き方の変更
V2とV3とではだいぶJavascriptの書き方が変わりました。
便利な方向に変わってもらえれば嬉しいのですが。




◆htmlヘッダー部分に書くもの
ここでtrue_or_falseとありますが、
これは位置検知センサー(GPSなど)がある機器ではtrue、
それ以外はfalseをしていします。
iPhoneなどの地図を表示する場合はtrueとし、
それ以外はfalseとします。
PC用の地図ならfalseとします。




◆div要素の追加
ここはVersion2と同じですね。




◆地図を表示するためのJavascript

・google.maps.event.addDomListener(window, 'load', function()
  これは便利です。
  すでにonloadがある場合でも気にせずgoogle mapを追加できます。

・var options = {
  マップのオプションを設定します。
  今回は必要最低限のものだけを設定しています。

  zoom:初期表示時のズーム値です(0~19)。
  center:初期表示位置です。
  mapTypeId:初期表示時のマップの種類です。

ROADMAP地図
SATELLITE航空写真
HYBRID地図+写真
TERRAIN地形


・new google.maps.Map(map, options);
  マップを表示します。




◆上記の要領で地図を表示してみます。




まだ地図を表示しただけですが、
なんとなく使い易くなっていそうな気がします。
どんな事が出来るようになったのか、非常に楽しみです。
(マウスのスクロールズームは標準で有効になっているのですね)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。