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

投稿日 2013/12/06   更新日  ネット関連

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

• ストリートビューを上面に表示
• ストリートビューのペグマンは別の位置に表示
• マーカーの座標をずらして中心点を下げる
• 地図サイズは非固定

※ 地図サイズを非固定にすると伸縮するので、小さい画面では見難いかもしれません
ケースバイケースで使い分けが必要ですね
今回はサンプルということで、わざとこのようにしています

<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 ブラウザ使用

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