ウェブサイトを作っていると、度々地図表示することについて考えを巡らすことになります。地図サイトへのリンクでいいのか、イラストマップを描き起こした方がいいのか。いろいろな方法がありますが、グーグルマップを流用することを考えてみます。
地図を埋め込む
この頃、地図サイトの地図も充実してきたり、地図アプリがナビしてくれたりということもあって、地図サイトの地図をページに埋め込むことが多く見られるようになりました。これには一長一短あります。
長所
- 地図サイトさながらにスクロールして「外側」も見られる
- 拡大／縮小も思いのまま
短所
PCサイトではなかな気づきにくいのですが、見やすさを考慮したつもりで幅いっぱいに大きく表示されたモバイルサイトの場合、フリックしてページを送りたいのに地図が送られてしまってページの続きが見られなくなることがよく見られます。
幅95％など割合で示していればまだしも、800pxなどのピクセル数で指示されたままでは、肝心な地図が画面からはみ出していたりして、それもちょっと困りますね。
Google map で「群馬県南牧村役場」を表示したうえで、共有をクリックして得られる埋め込みタグで表示できます。
<iframe src="//www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3221.328778085424!2d138.70921751518492!3d36.15855328008577!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601c277a5469ceb5%3A0x6e09a1cdf7c3e844!2z44CSMzcwLTI4MDYg576k6aas55yM55SY5qW96YOh5Y2X54mn5p2R5aSn5pel5ZCR77yR77yQ77yZ77yY!5e0!3m2!1sja!2sjp!4v1449114965718" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
説明するまでもなく「共有」は Google map が提供している
「共有」で「埋め込み」すれば、地図表示の枠の範囲内でスクロールも拡大縮小もできる便利さ。でも、表示にちょっと時間がかかることがあったり、<iframe>特有の動き（サイズや位置が固定されたり等）が気になることもあります。
あと、あらかじめ Javascript を読み込んで置かなければならないなどのトラフィックの邪魔もあります。このブログでは Javascript を読み込まないので表示できません。
Google map を <img>として表示する
<img src="//maps.googleapis.com/maps/api/staticmap?center=群馬県南牧村役場&zoom=16&format=png&sensor=false&size=640x480&maptype=roadmap&markers=群馬県南牧村役場">
APIも何も必要なく、いきなりこれで表示できちゃうからすごいですね。ただし、幅640px以上の数値を指定しても640pxまでに限定されます。
ここで使ったパラメータは次のとおり。
- center
地図の中心を、住所や目標名や座標等で指定 - zoom
地図のズーム位置を数字で指定。数が大きいほど詳細。 - format
画像タイプ「PNG」「GIF」「JPEG」 - sensor
ユーザの位置情報を取得するか - size
ピクセル単位で指定 - maptype
地図の種類。「ROADMAP」の他に「HYBRID」「SATELLITE」 - markers
マーカーの位置を、住所や目標名や座標等で指定
また、最大表示回数も限定されていますが、よほどの人気ブログ等でなければそれを超えることはまずないのではないかと思います。
普通の <img> と同じ動きをしますので、適当なクラス名を割り振ってCSSで表示位置等を制御することも可能です。
そしてなんといっても、APIを読み込まなくてもいきなり表示できるので便利ですね。また、地図が更新されれば更新されたなりに表示されるので、隣に駅ができたからといっていちいち貼り替えなくてもいいところがとてもイケいるように思います。
なお、グーグルマップの利用については、使用許諾についてのページも参考にしてください。
