(2010年3月の記録)Static Maps API をケータイサイトで使う。


(現在では淘汰された感のあるケータイサイトについて、2010年2月4日に書いた記録として残しておきます。)

昨日は超簡単なケータイサイトを作ってて、そこに地図が数十枚必要だったのでGoogleのマップを使うことにしました。実際にWebやモバイルのページを作ってる人は、難しくないでしょうけれど、HTMLをちょっと書ける初心者の人に向けて、書いておきます。

要するに、下記のような動かない地図(Static Maps)画像ですが、移動や拡大などをしなくていいという用途には使えます。

まず、下記。
Google MAPS API に登録する

Google Maps API を使用すると、あなたのウェブページに Google マップを埋め込むことができます。単一の Maps API キーは、単一の「ディレクトリ」またはドメインで有効です。詳細についてはこの よくある質問 を参照してください。Maps API キーを取得するには Google アカウントが必要です。取得した API キーは、この Google アカウントと関連付けられます。

とあります。
*Google アカウントをお持ちでない方は事前に必要です。

Google MAPS API登録は、Google アカウントでログインした状態でアクセスし、下記のように入力して「APIキーを生成」ボタンを押します。

するとページが変わると下記のように長いAPIキーというものを頂けます。

(APIキーをメモ帳にでもコピーしておきます)
またこのページには「JavaScript Maps API Example」や「Maps API for Flash Example」といった機能性の高いマップ作成の記述がありますが、今回は無視してページの下のほうに書いてある「Google Static Maps API」のリンクを押してStatic Maps API デベロッパー ガイドに進みます。

このページには、かなりわかりやすく静的地図画像の呼び出し方(使い方)が書かれています。
緯度、経度を書いて場所を指定したり、サイズを変えたり、倍率を変えたり、目的の場所にマーカーを打ったりができます。
このページに書かれているパラメータの意味、指定方法はじっくりとお読みください。

さて、ここでさっきの地図を例にすると、ソースは下記。

<img src=”http://maps.google.com/staticmap?center=35.682782,139.757938&zoom=14&size=400×300&maptype=mobile&markers=35.683851,139.753973,red&key=(生成されたAPIキー)&sensor=true”>

書かれているパラメータの意味は下記。

<img src=”http://maps.google.com/staticmap?center=35.683851(緯度),139.753973(経度)&zoom=14(倍率)&size=400×300(サイズ)&maptype=mobile(モバイル用)&markers=35.683851(マーカーの緯度),139.753973(マーカーの経度),red(マーカーの色)&key=(生成されたAPIキー)&sensor=true(ユーザーがGPSを使用している)”>

わかりやすいでしょ?
あ、そうそう、指定しなければならない緯度、経度、マーカーの位置はどうやって調べるのか?
それは下記のGeocodingというサイトにて、住所で検索しました。
千代田区千代田1-1
ちょうどいい位置に地図を動かし、緯度・経度と吹き出しの中にある座標の緯度・経度(マーカーの緯度経度に利用)を調べました。

HTMLはなんとか書けるぐらいの初心者の方向けに書きましたが、どうでしょうか。

(追記)
Google MAP(Ver.2)の利用法解説サイトをお持ちの方からコメントをいただきました。そちらもどうぞ。
http://googlemaps.googlermania.com/google_static_maps_api_v2/


(2010年3月の記録)Static Maps API をケータイサイトで使う。” への2件のフィードバック

  1. Google Static Maps APIはversion2が出ていますので、そちらの利用をおすすめします。

コメントを残す

メールアドレスが公開されることはありません。