iPhoneゲーム自作工房5 - Googleマップ回転ゲームの作成

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など必要なパラメータを指定します。これ以外のパラメータに関しては以下のページを参照してください。