WordPressを利用して、ブログではなくCMSとして企業サイト・企業ウェブサイト作成・商用ホームページ制作のテクニックを公開。WordPressの最新ニュースやプラグインの紹介、自作プラグインやテーマも開発中。
Google Static Maps APIの機能が拡張(パスを表示可能に)

Google Static Maps APIの機能が拡張(パスを表示可能に)

お手軽にGoogle Mapsの地図を張り付ける方法(携帯電話でも表示できる)という記事でGoogle Static Maps APIの紹介をしたが、Official Google Maps API Blog: Static Maps Have Never Looked This Good!によると、Google Static Maps APIに新機能が加わったようだ。

追加されたパラメータ
http://maps.google.com/staticmap?parameters
Google Static Maps APIはparameters部分に位置情報やサイズ、マーカー情報を指定するだけでGoogleマップの地図を表示できるので大変簡単だ。APIの基本的な使い方はお手軽にGoogle Mapsの地図を張り付ける方法(携帯電話でも表示できる)を見るか、Googleのオフィシャルなドキュメントを参照してほしい。ここでは追加されたパラメータを見てみよう。

markers
地図上にマーカーを配置するパラメータで、追加されたのはサイズとカラーである。sizeにはtiny, mid, smallの3種類に加えて何も指定しないデフォルトが指定できる。colorにはblack, brown, green, purple, yellow, blue, gray, orange, red, whiteの8種類が指定できるようになった。なお、マーカーに表示できるアルファベットの文字はマーカーサイズがmidかデフォルトの時だけで、tinyとsmallでは表示されないようだ。

マーカーを指定するには、markers={latitude},{longitude},{size}{color}{alpha-character}のようにする。サイズ、カラー、アルファベットが連続して指定されるのがポイントだ。

<img src="http://maps.google.com/staticmap?center=35.658517,139.701334&markers=35.658517,139.699334,tinyblack|35.658517,139.700334,smallpurple|35.658517,139.701334,midorangeo|35.658517,139.702334,whitew&zoom=16&size=512x150&key=ABQIAAAAT--ITJplvWF-DcJffBzSbRSfMB8pWqvvd1FJvhYen9GdTdnNKxTEhHNPV0XPH4pg0Hidf6yKctNiLA" width="512" height="150" class="imageframe" alt="Google Static Mapsサンプル マーカー表示" />

Google Static Mapsサンプル マーカー表示

path
パスを指定する。パスは、path=pathColorType:pathColorValue,weight:pathWeight|pathPoint1|pathPoint2|pathPoint3|… ように指定し、最初に色と太さを指定した後、ポイントの座標を順番に指定する。パスのポイントは、|(パイプ、%7C )で区切る。pathColorTypeには2通りあって、rgbとrgbaがある。rgbは透明度が50%になっている。rgbaで透明度を変更するには末尾の2文字を変えるといい。100%:ff、80%:cc、60%:99、50%:80、40%:66、20%:33といった具合だ。太さの単位はピクセルだ。ポイントは50個まで打てる。

  • 青く細い線、透明度50%: path=rgb:0x0000ff,weight:1
  • 赤い線: path=rgba:0xff0000ff,weight:5
  • 黒く太い線: path=rgba:0xffffffff,weight:10
<img src="http://maps.google.com/staticmap?path=rgba:0x0000ffff,weight:5|35.681099,139.767084|35.682172,139.762251|35.67506,139.759676|35.677858,139.753443|35.676228,139.74678&size=512x150&key=ABQIAAAAT--ITJplvWF-DcJffBzSbRSfMB8pWqvvd1FJvhYen9GdTdnNKxTEhHNPV0XPH4pg0Hidf6yKctNiLA" width="512" height="150" class="imageframe" alt="Google Static Mapsサンプル パス表示" />

Google Static Mapsサンプル パス表示

format
画像のフォーマット形式を決める。デフォルトではgifだが、jpg、png(32bit)も指定できる。formatの値は、gif, jpg, png32となる。例: format=jpg
hl
マップ上のラベル言語を指定する。hlに指定できるのは英語ならen、日本語ならjaなどのようなISO639に準拠した2文字の言語コードのようだ。しかしながら地図がその言語に対応していないと意味がない。下の例はhl=enを指定して、英語表記にしてみた例だ。

<img src="http://maps.google.com/staticmap?center=35.681099,139.767084&hl=en&zoom=6&size=512x150&key=ABQIAAAAT--ITJplvWF-DcJffBzSbRSfMB8pWqvvd1FJvhYen9GdTdnNKxTEhHNPV0XPH4pg0Hidf6yKctNiLA" width="512" height="150" class="imageframe" alt="Google Static Mapsサンプル 英語表示" />

Google Static Mapsサンプル 英語表示

以上、簡単ではあるがパワーアップしたGoogle Static Maps APIの新機能を見てみた。1000ユニーク画像という制限はあるものの、なかなか自由度も増してきたので利用してみるのもいいかもしれない。しかしながら、座標の指定方法やパスの指定がなかなか大変だ。GoogleによってStatic Map Wizard(IEでは動かない)が公開されてはいるがなかなか面倒だ。できればGoogle Static Maps API専用のWordPressプラグインがあるとよいのだが。