Googleマップの画面ロック
最近仕事で、大体個人店などのページには、決まってGoogleマップを使用します。
・・・が、以前より鬱陶しいと思っていた、Googleマップ。
いえ、Googleマップ自体は地図としては本当に素晴らしい機能です。
ですがね。
マウスでページをずっとスクロールしている際、もしくは、スマホでスワイプしてる際に、それらがiframe領域にちょうど当たると・・・
「マップに引っかかって、ページがスクロール出来ねえ！！」
↓
「おかげでズームしすぎて所在地わかんねぇ！！」
みたいな。
よくあるパターンですね。鬱陶しい。
そこで、簡易的な対策として、Googleマップ自体にブロックタグを網掛けしとけばいけんじゃね？みたいな発想に行き着いた。
ものすごく短絡的ではありますがね。
とりあえずjQuery使ってスクリプトを作成した。
設置例：
<!– <head>のとこに記述 –>
<script src="maplock.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$(‘#maplock’).maplock();
});
</script>
<style>
#maplock{
padding-top:25%;
width:100%;
position:relative;
z-index:1;
}
#maplock iframe{
width:100%;
height:100%;
position:absolute;
z-index:10;
top:0;
left:0;
}
</style>
<!– Googleマップ本体 –>
<div id="maplock"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2869.235633080917!2d144.231029!3d44.016525!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f6d348021cc16e1%3A0x5281c0d212d670f2!2z57ay6LWw5YiR5YuZ5omA!5e0!3m2!1sja!2sjp!4v1422342532492" frameborder="0" scrolling="no"></iframe></div>
以下を「maplock.js」で保存。
Javascript
(function($){
$.fn.maplock = function(options){
var maplockOptions = {
maplockBtn : ‘images/viewmap.png’,
maplockOpc : 0.5,
maplockClo : ‘#000000’,
maplockEas : ‘swing’,
maplockDur : 1000
};
var maplockSetting = $.extend(maplockOptions, options);
$(this).find(‘iframe’).wrap(‘<div class="maplockBase"></div>’);
$(this).find(‘.maplockBase’).append(‘<div class="maplockHit" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:100;cursor:pointer;"><div class="maplockLayer" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:200;background-color:’+maplockSetting.maplockClo+’;cursor:pointer;"></div><div class="maplockButton" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:300;cursor:pointer;background-image:url(‘+maplockSetting.maplockBtn+’);background-repeat:no-repeat;background-position:center center;"></div></div>’);
$(this).find(‘.maplockHit’).css({‘opacity’:’1.0′});
$(this).find(‘.maplockLayer’).css({‘opacity’:maplockSetting.maplockOpc});
$(this).find(‘.maplockHit’).click(function(){
$(this).stop(false,true).animate({‘opacity’:’0.0′},{
duraition : maplockSetting.maplockDur,
easing : maplockSetting.maplockEas,
complete : function(){
$(this).css({‘display’:’none’});
}
});
});
return(this);
}
})(jQuery);
以下はプラグインのプロパティ。
$(‘#maplock’).maplock({
maplockBtn:’images/button.png’, // ボタン用画像
maplockOpc:0.4, // 網掛けの透過度
maplockCol:’#CCCCCC’, // 網掛けの色
maplockEas:’linear’, // イージングの指定(easingプラグインある場合)
maplockDur : 500 // でゅれーしょん });
またそのうち頻繁に使うでしょうねー、俺がね。