「Google Static Maps API」を使って携帯でGoogleマップを表示する
先日公開された「Google Static Maps API」を使って、ケータイ上でGoogleMapを表示してみたいと思います。
「Google Static Maps API」とは、一言でいうと動かないGoogleMapで、JavaScriptではなく静止画で地図を表示するためのAPIです。
画像で地図を表示するので、ケータイからでも問題なく表示できます。
使い方は簡単で、imgタグの引数に必要なパラメータをつければOKです。
GoogleChartと違ってGIF画像で提供されるため、どの機種でもほぼ問題なく表示できます。
ただし、GIF画像を見れない機種(3G以前のソフトバンク端末など)では表示できません。
パラーメータの説明は次の通りです。
http://maps.google.com/staticmap?
center=[中心の緯度],[中心の経度]
&zoom=[ズームレベル]
&size=[画像の横幅]x[画像の高さ]
&maptype=[mobile or roadmap]
&markers=[マーカーの緯度],[マーカーの経度],[色][アルファベット]
&key=[APIキー(GoogleMapと共通)]
ケータイから使うならmaptypeは「mobile」で良いようです。
マーカーの色と表示したいアルファベットの間にはカンマはいらないことに注意してください。
また「%7C」で区切ることで複数マーカーが使えるようです。
具体例としては次の通りです。
<img src="http://maps.google.com/staticmap?center=43.068527,141.350806
&zoom=15&size=220x220&maptype=mobile&markers=43.068367,141.347646,
redy%7C43.067402,141.352697,blueb&key=[APIキー]" />
※実際には一行で入力
表示例:

公式なAPIリファレンスはこちらにあります。
→ Google Code Google Static Maps API [google.com]
GooleMapをケータイから表示するには、利用規約などの問題もあり、色々と悩みが多かったのですが、これでひとまず解決といったところでしょうか。
画面を動かせないので一見地味ですが、地図の表示位置はパラメータで自由に変更できるため、カーソルボタンを用意して、緯度・経度を少しずつずらしてやれば、スクロールしたりズームしたり出来る地図を表示できるはずです。
ただ、制限事項として1ユーザ(1IPアドレス)当たり、表示は1日1000種類の画像までという制限(※原文によると「1000 unique image requests per user per day」)があるようですので、上記のような使い方だと、あまりアクセスが多いサイトでは利用できません。
通常の静止画を貼る使い方であれば、この制限が問題になることはないでしょう。
早く携帯用のAPIが公開されて、ケータイでも自由に動かせるGoogleMapを使えるようになるといいですね。
関連:
- 携帯からGoogleMapで指定の場所を表示する方法(住所指定方式)
- 「Google Chart API」をケータイから使ってみる
- ケータイで取得した位置情報をGoogleMap形式に変換するサンプル

Web+DB PRESS Vol.45
Web Designing 2008年 07月号
Web担当者現場のノウハウVol12~今から始めるモバイルSEO&マーケティング入門
携帯端末用Web制作バイブル 第2版
ケータイHTMLコンパクトリファレンス
2 月 28th, 2008 at 0:59:26
[...] ke-tai.org > Blog Archive > 「Google Static Maps API」を使って携帯でGoogleマップを表示するTopic: 未分類| 先日公開された「Google Static Maps API」を使って、ケータイ上でGoogleMapを表示してみたいと思います。 「Google Static Maps API」とは、一言でいうと動かないGoogleMapで、JavaScriptではなく静止画で地図を表示するためのAPIです。 画像で地図を表示するので、ケータイからでも問題なく表示できます。 使い方は簡単で、imgタグの引数に必… original article [...]
3 月 1st, 2008 at 12:05:48
はじめまして。試したのですが、うまく表示されません。
どうしてでしょう。
上記の具体例をコピペ&htmlにペースト。
全角「”」半角に変更。
APIキーをつけて鯖UP。
携帯で見てもダメでした。
どうか教えてください。
3 月 3rd, 2008 at 1:26:12
ご指摘ありがとうございます。
すいません。ブログの仕様からか全角などに変換されてしまい、意図した通りに書けていませんでした。
確認が足りず申し訳ありません。
修正しましたので再度お試しください。
3 月 3rd, 2008 at 15:29:52
できました!
ありがとうございます。
4 月 14th, 2008 at 19:18:44
SoftBank(3G)で軒並み「リンク切れ」表示です。DoCoMo、AUは大丈夫です。みなさん、どんな状況でしょうか?
4 月 14th, 2008 at 19:57:15
tibaさん
コメントありがとうございます。
確認してみたところ、手元のSoftBank端末では表示できました。
705SHです。
4 月 16th, 2008 at 1:25:47
確認有難うございます。
本当ですか~。こちらでは未だできません。
機種(UserAgent)はコチラでした。
SoftBank/1.0/821SH/SHJ001 Browser/NetFront/3.4 Profile/MIDP-2.0 Configuration/CLDC-1.1
別の東芝の機種でも同じでしたので不思議です。
ドコモ、AUはそれぞれ、
DoCoMo/2.0 D904i(c100;TB;W24H12)
KDDI-SN39 UP.Browser/6.2.0.11.2.1 (GUI) MMP/2.0
ですが、何れもOKなのです。
821SHで分かったことですが、画像URLに直接アクセスすれば成功するのですが、HTML内のタグに画像URLを書き込む普通のやりかただと駄目なのです。
5 月 9th, 2008 at 12:37:14
はじめましてbicycleともうします。
上記の方法で、複数のポイントをつけたり、ラインを引く事は可能なのでしょうか?
5 月 9th, 2008 at 17:38:06
bicycleさん
コメントありがとうございます。
複数ポイントを付けることは可能です。
markersのパラメータを「%7C」で区切ることで、複数のマーカーを表示することができます。
ラインは上記では紹介していませんが、pathパラメータで引くことができるようです。
詳しくは上記の記事からリンクしてあるGoogleのページに載っています。
そちらを確認してみてはいかがでしょうか。
5 月 11th, 2008 at 10:52:59
>管理人様
ありがとうございます!!!
複数についてはすでに記述されてましたね、すいません。
ラインもあるんですね。英語のページですが、頑張って攻略
します。また何か質問してしまうかもしれません、たよりに
しています、その時はよろしくお願いします☆
5 月 13th, 2008 at 23:35:58
bicycleさん
遅ればせながらラインの引き方を記事にしてみました。
もしよろしければ参考にしてください。
http://ke-tai.org/blog/2008/05/13/gmap2/