Google マップの地図を静的に画像化する

先の記事「Google マップの埋め込みについて考える」では、Google マップを自サイトのページ内にインラインフレームとして埋め込むのではなく、画像化した地図を <img> 要素でページに貼り付けて、そのうえで Google マップの URL へのリンクを設けることを提言しました。ページをスクロールする際のユーザビリティ問題を解消できると同時に、インタラクティブな地図操作を Google マップのサイト (モバイルデバイスであれば Google マップのネイティブアプリ) 側に委ねることで、むしろ優れたユーザーエクスペリエンス (UX) をもたらすことが期待できます。

ところで、Google マップの地図を (静的に) 画像化して <img> 要素でウェブページに貼り付ける際は、Google の著作権を侵害しないように注意する必要があります。簡単な解決策としては、Google Maps API Styled Map Wizard を使用して地図画像を作成するとよいでしょう。Google の許諾範囲内 (ご参考 : Google マップ、Google Earth、ストリートビュー使用許諾) で地図のカスタマイズができますし、出力される地図画像には権利帰属表示 (ご参考 : Google マップと Google Earth の権利帰属表示に関するガイドライン) も自動的に盛り込まれるからです。

「Google Maps API Styled Map Wizard」で出力された静的な地図画像には、URL (http://maps.googleapis.com/maps/api/staticmap?...) が付与されます。この URL を <img> 要素の src 属性に入れれば、ウェブページに地図画像を貼り付けることができるわけですが、Google Static Maps API によって、さらに必要な情報を URL に追記することもできます (ご参考 : URL Parameters (Google Static Maps Developer Guide))。たとえば地図にマーカー (特定の位置を指し示すマーク) を付加する場合は、下記のように追記します。

マーカーを特定の位置に付加する
URL に変数「&markers=xxxxxx,xxxxx (緯度経度)」を追記する。
マーカーに識別のための文字 (A, B, C, ...Z) や数字 (0, 2, 3, ...9)を入れる
個々のマーカー用変数 (&markers=) の中に「label:」記述を加える。「&markers=label:1|xxxxxx,xxxxx (緯度経度)」という具合に、半角パイプ (|) で区切りを入れる。
マーカーの色を変更する
個々のマーカー用変数 (&markers=) の中に「color:」記述を加える。「&markers=color:yellow|label:1|xxxxxx,xxxxx(緯度経度)」という具合に、半角パイプ (|) で区切りを入れる。

以下、実装サンプルです。

マーカーがひとつだけの場合。<img> 要素の src 属性の URL に、変数「&markers=xxxxxx,xxxxx(緯度経度)」を追記している。
マーカーがひとつだけの場合
<img src="http://maps.googleapis.com/maps/api/staticmap?center=35.516415,139.601267&zoom=15&format=png&sensor=false&size=640x480&maptype=roadmap&style=feature:landscape.man_made|element:labels.icon&scale=2&markers=35.522568,139.590322" alt="マーカーがひとつだけの場合" />
マーカーが複数ある場合。<img> 要素の src 属性の URL に、変数「&markers=xxxxxx,xxxxx(緯度経度)」を複数追記したうえで、個々の &markers 変数の中に「label:」記述 (数字) を加えている。
マーカーが複数ある場合
<img src="http://maps.googleapis.com/maps/api/staticmap?center=37.002553,136.461182&zoom=6&format=png&sensor=false&size=640x480&maptype=roadmap&style=feature:road|visibility:off&scale=2&markers=label:1|35.681570,139.991833&markers=label:2|35.522568,139.590322&markers=label:3|34.664374,135.218520&markers=label:4|34.636905,135.449640&markers=label:5|35.856451,139.870060&markers=label:6|33.710082,130.449644&markers=label:7|35.706756,139.411843&markers=label:8|38.225450,140.886226" alt="マーカーが複数ある場合" />

なお、src 属性内に半角パイプ (|) があると、The W3C Markup Validation Service ではエラーとなってしまいます。気になる場合は、半角パイプを「%7C」にエンコードするとよいでしょう (上記の実装サンプルでもそうしています)。