prettyPhoto モーダルウィンドウでGoogle Maps

2013/12/06 prettyPhoto

prettyPhotoは画像や動画以外にもインラインフレームでの表示もできます

インラインフレームでの表示サンプル
結構簡単なので特に説明はしませんが、こんな感じに表示されます
-> DEMOページ
<a href="http://www.miyacozi.com/?iframe=true&width=100%&height=100%" rel="prettyPhoto" title="砕け散る粛正">www.miyacozi.com</a>

Googleマップの表示サンプル
Googleマップも同じように「iframe」を使ってモーダルウィンドウで表示することができます
その場合はGoogleマップのパラメータを少しは理解しておいたほうがいいかもしれません
-> DEMOページ

サンプル:大阪城 Osaka Castle
  • マーカーの吹き出しを非表示
  • 地図サイズは固定
<a href="https://maps.google.co.jp/maps?q=%E5%A4%A7%E9%98%AA%E5%9F%8E&hl=ja&ie=UTF8&sll=36.5626,136.362305&sspn=62.600685,115.576172&brcurrent=3,0x6000e0cd77bd3f45:0x588525f28ce51ab9,0&hq=%E5%A4%A7%E9%98%AA%E5%9F%8E&t=m&z=15&output=embed&iwloc=B?iframe=true&width=800&height=600" rel="prettyPhoto[map]" title="大阪城 Osaka Castle">大阪城 Osaka Castle</a>

サンプル:大阪城 Osaka Castle
  • ストリートビューを上面に表示
  • ストリートビューのペグマンは別の位置に表示
  • マーカーの座標をずらして中心点を下げる
  • 地図サイズは非固定
※ 地図サイズを非固定にすると伸縮するので、小さい画面では見難いかもしれません
ケースバイケースで使い分けが必要ですね
今回はサンプルということで、わざとこのようにしています

prettyPhoto モーダルウィンドウでGoogle Maps -1

<a href="https://maps.google.co.jp/maps?q=%E5%A4%A7%E9%98%AA%E5%9F%8E&hl=ja&ie=UTF8&ll=34.692015,135.525777&spn=0.007269,0.028217&sll=34.687315,135.526201&layer=c&cid=1081374622389182017&panoid=ycCBb5tGJcPn_z4OjyPBVQ&cbp=11,143.69,,0,-14.65&brcurrent=3,0x6000e0d14525de47:0xc65dd198d6480448,0&hq=%E5%A4%A7%E9%98%AA%E5%9F%8E&t=m&z=16&cbll=34.688679,135.524739&output=svembed?iframe=true&width=90%&height=90%" rel="prettyPhoto[map]" title="大阪城 Osaka Castle">大阪城 Osaka Castle</a>

パラメータを覚えるとか、かなりめんどくさいですよね
最近、新しいGoogleマップも埋め込みに対応したようですし、埋め込んだほうが簡単です
でも、たまにはこういった"演出"があるのもいいのではないでしょうか

※ この記事は旧GoogleマップとPC用のURLを使っています
※ Googleマップは、PCとモバイルではURLが違います
モバイル環境ではPCの表示とは違うので、ご注意ください

おまけ:モバイルでの表示
PC用のURLで作成したものが、モバイル環境では「どのように見えるか」です
Nexus7(2013) Android 4.4(KitKat)
Next ブラウザ使用

prettyPhoto モーダルウィンドウでGoogle Maps -2

prettyPhoto モーダルウィンドウでGoogle Maps -3

prettyPhoto モーダルウィンドウでGoogle Maps -4

prettyPhoto モーダルウィンドウでGoogle Maps -5

上から1枚目と2枚目は、UA(ユーザーエージェント)をモバイルにしたときの表示です
3枚目と4枚目は、UAをPCにした時の表示です
4枚目は、Flash Playerが入っていると2枚目と同じようにストリートビューの表示になります