スマホサイトと携帯サイト制作講座

モバイルサイトでのGoogleマップ表示は、携帯電話3キャリアではJavascriptコードでは実装できませんでしたが、携帯サイト用GoogleマップAPI、Google Static Maps APIを使用すれば、JavascriptなしでGoogleマップを表示させることが可能です。


従来形式のGoogle Maps APIと異なり、Javascriptコード不要ですので、携帯電話用モバイルサイトのWebページなどタグを貼り付けるのが多きな特徴です。


携帯サイトのGoogleマップ実装方法としては、APIキーは必要になりますが、＜img＞ タグ定義のパラメータで地図情報を渡す手法です。


表示スピードもJavaScriptは表示速度が向上されるのではないでしょうか。

画像生成形式なので、地図画像を携帯に画像保存すれば、添付ファイルにて電子メール送信も可能。


【実装の仕方】

基本構文は以下のようになり、

http: //maps.google.com/staticmap?parameters　

parameters部分に位置情報やマップサイズ、マーカー情報を指定。

＜img src="http://maps.google.com/staticmap
?center=35.65641,139.699477
&markers=35.65660,139.699477,red
&zoom=16
&size=240x320
&key=[ここに Key を記述]"＞


＜img＞ タグ定義のURLがStaticMapsサービスに送信され、URLに付属するパラメータによって動的イメージ生成されるようです。

使用できるパラメータ一覧。
※以下GoogleJapanブログより引用

・center（必須）：マップの中央の座標を緯度と経度で指定します（例：center=35.65641,139.699477）
・zoom（必須）：ズームレベルを0～19の間で指定します（例：zoom=13）
・size（必須）：表示するマップのサイズを幅×高さで指定します。なお、指定できる地図の最大の大きさは512x512です
・maptype（オプション）：マップの表示タイプを指定します。値はroadmapとmobileの2種類で、roadmapは標準のマップ表示、mobileは携帯用に見やすくした表示となります。roadmapがデフォルトとなります。
・markers（オプション）：マーカーをマップ上に配置します。マーカーを指定した場合、centerやzoomは指定しなくても構いません。指定で きる内容は、マーカーの緯度・経度、マーカーの色（red,blue,green）、マーカーの文字（a-z）を指定できます。また、複数のマーカーを指 定するときは、|（パイプ、%7C ）で区切ります。
・key（必須）：Google Maps API キーを指定します。

Static Maps Wizard　 という簡易ツールが提供されています。API キーのない方でも、表示したい住所を入力して、出来上がりイメージの大きさを指定すれば、上記のような URL を作成してくれます。あとは、＜img＞ タグを使って、URL をウェブページに埋め込むだけです。

【引用元】
http://googlejapan.blogspot.com/2008/03/google_1433.html


なのでGoogleアカウントを作成して、APIキーを取得して、IMGタグの引数を設定すれば、携帯版Googleマップ表示ができるというわけです。ただし、Flash Lite1.1の場合はswfしか外部ファイルが参照できないので、3キャリア対応にする場合、別々に作成したり、かつ表示できない機種も結構あると予想されます。