Google Static Maps API

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4.00 out of 5)
Loading ... Loading ...

Google Mapsはかなり便利ですが、携帯電話向けのWebサイトでGoogle Mapsを使いたくてもJavaScriptが動かない理由から携帯サイトに地図を表示させる事が困難でしたが、新しくGoogle Static Maps APIの登場のおかげで携帯サイトでもGoogle Mapsが使えそうです。

今までのGoogle Maps APIとは何が違うのかと言うと、Google Maps APIはマウスでドラッグして自由に地図を動かせるのに対して、Google Static Maps APIは地図を一枚の画像として提供してくれます。

なので、携帯サイトで地図の画像を表示させると言う使い方などが出来そうです。

まずは使用するに当たりAPI Keyを取得する必要があります。下記のサイトでAPI Keyを取得です。

http://code.google.com/apis/maps/signup.html

API Keyを取得したらあとはGoogle Static Maps APIを使ってみるだけです。

<img src="http://maps.google.com/staticmap?center=35.680899,139.766479&zoom=14&size=240x240&maptype=mobile&markers=35.680899,139.766479,red&key=(API KEY)" />

IMGタグのSRCに[http://maps.google.com/staticmap]を指定して以降は画像のサイズや緯度、経度などのパラメータを渡してあげると出来上がります。

簡単にパラメータの説明です。

  • center 画像の中央の緯度と経度をカンマで区切って指定
  • zoom 地図のズームレベルを指定
  • size 画像のサイズを (width)x(height) の形式で指定
  • maptype roadmap もしくは mobileのいずれかを指定
    (必須ではない。指定がない場合はroadmapになる)
  • markers マーカーの緯度と経度、マーカーの色をカンマで区切って指定
    (緯度),(経度),red のように指定。
    またredaのように指定すると赤いAのマーカーが作成される。
    マーカーを複数指定する場合はパイプ( | )で区切って書いていく。
  • key Google Maps APIのAPI Keyを指定

以上の内容を踏まえてマーカーを増やしたりしてみたいと思います。

<img src="http://maps.google.com/staticmap?center=35.680899,139.766479&zoom=14&size=400x300&maptype=mobile&markers=35.680899,139.766479,reda|35.67879,139.772551,blueb&key=(API KEY)" />

IMGタグで手軽にGoogle Mapsが扱えるなら携帯サイトなどに地図を載せたりといろいろと使いどころがあるのではないでしょうか。

Web API実践リファレンスブックを買いました

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Web API実践リファレンスブック

加藤 貴之 佐久間 勇樹 関戸 亮介 いわさき ゆうだい
毎日コミュニケーションズ (2007/05/25)
Amazon.co.jp で詳細を見る

先日Amazon.co.jpで買ってみました。Web APIはメジャーなところはある程度知っていたんですが、この本には意外に知らなかったWeb APIが結構紹介されてます。

リファレンスブックと言うタイトルだけあって、APIに渡してあげるパラメータがしっかりまとまって書かれていたり、レスポンスの例なんかも載ってたりとWeb APIを使って何か作ってみようかなって時には、近くに一冊あると便利なのかもと思います。

サンプルコードはPHPで書かれてます。メジャーなWeb APIの使い方から、あまり知らなかったWeb APIまで幅広く「インターネット」、「画像」、「動画」、「地図」、「場所」・・・などなど、ジャンル毎に紹介されてるので、辞書感覚で使えそうです。

何かいろいろなAPIを使ってマッシュアップして面白いものを作ってみるのも良いかと思います。

Get Adobe Flash playerPlugin by wpburn.com wordpress themes