« Flashで携帯コンテンツ | トップページ | 小料理屋さんのWebサイト »

2008.06.28

JavaScriptを使わずにGoogleマップを表示

Google Static Maps API|web creators 2008年6月

なんだか急にバタバタし始め、なかなか時間が取れずに結構間が空いてしまいました。
早速ですが、時間もないので困った時のお手軽tipsの紹介です。
Googleマップは非常に便利なので、Webサイトで現地を紹介する時など僕もよく利用させてもらっています。
ただし、JavaScriptで構成されているため、携帯電話やJavaScript非対応の環境では表示することが出来ないのです。
しかし、そこは流石のGoogleで新しく「Google Static Maps API」というAPIを公開しました。(web creators 2008年6月号の「WEBデザイン TIPS&TRICKS」で紹介されています)
これを利用すればJavaScript非対応の環境でもGoogleマップを表示することが出来ます。(※JavaScriptを使っていないので動きませんよ!…念のため)

では、サンプルです。

まずはGoogleのAPIキーを取得しなければならないんですが、このブログを見ている人なら多分もう持ってますよね?ちなみに、(code.google.com/apis/maps/signup.html)から取得できます。

次に表示したい位置の緯度と経度が必要です。これは「Geocoding」という便利なサイトで住所を打ち込むと簡単に判ります。

後は下記のようなアドレスをブラウザに打ち込んでみて下さい。(例として金沢市役所の座標にしています)
http://maps.google.com/staticmap?center=36.561328,136.656208&zoom=14&size=512x512&maptype=mobile&markers=36.561328,136.656208,bluea&key=【ここにAPIキー】

各オプションはオフィシャルサイトに記述してありますが、基本的なモノは次になります。
----------
center:地図の中心になる経度と緯度
zoom:拡大率
size:地図の大きさ
maptype:地図の種類、roadmapかmobile
markers:マーカーの表示(緯度と経度、色、種類)
keys:APIキー
----------
※img要素のsrc属性にURLを指定すれば、画像として表示できます。
いろいろ試してみて下さい。

|

« Flashで携帯コンテンツ | トップページ | 小料理屋さんのWebサイト »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/41673244

この記事へのトラックバック一覧です: JavaScriptを使わずにGoogleマップを表示:

« Flashで携帯コンテンツ | トップページ | 小料理屋さんのWebサイト »