Googleマップを表示するには?

今回は回転させるため、以下のページにアクセスしてAPIキーを取得する必要があります。

Google Maps APIのキー取得ページ
http://code.google.com/intl/ja/apis/maps/signup.html

APIキーを取得したら以下のタグの●の部分をAPIキーに置き換えてください。

<img id="myMap" src="http://maps.google.com/staticmap?center=35.691108,139.757059&zoom=17&size=200x200&maptype=mobile&key=●">

例えばAPIキーが「ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA」であれば以下のようにします。

<img id="myMap" src="http://maps.google.com/staticmap?center=35.691108,139.757059&zoom=17&size=200x200&maptype=mobile&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA">

ここまで読んで、あれっ?と思った人もいるかもしれません。通常のGoogleマップはJavaScriptコードを埋め込んだり表示先のタグを指定しないといけません。では、上記の<img>タグのような書き方ではマップは表示されないのではないか、と思う人もいるでしょう。実はGoogleマップは改良され、現在では一切JavaScriptを使用することなくURLを指定するだけで任意の位置、ズームレベルで地図を表示させることができます。

これは通常のGoogleマップと異なり静的なGoogleマップなのです。多少の制約はありますが、スクリプトを必要としないため携帯電話や携帯デバイス、ゲーム機などでもグーグルマップを表示することができるというメリットがあります。地図を表示するには<img>タグのURLに必要なパラメータを指定します。まず、http://maps.google.com/staticmap? として、この後に中心となる位置(緯度、経度)をcenterで指定します。

地図をどのスケールで表示するかはzoomで指定します。マップのサイズはsizeで指定し「横幅のピクセル数×縦幅のピクセル数」の形式で指定します。あとは、maptypeやkeyなど必要なパラメータを指定します。これ以外のパラメータに関しては以下のページを参照してください。

Static Maps API Developer's Guide
http://code.google.com/intl/ja/apis/maps/documentation/staticmaps/

どうも、うまくいかない、分からない場合には適当に画像を作成して<img>タグのsrc属性に指定して遊んで下さい。

API取得画面

必要な情報を入力し「APIキーを生成」ボタンをクリックする。なお、入力するURLはディレクトリまでになるので間違ってファイル名まで含めないようにすること

生成されたAPIキー。これをコピーして利用する