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 // でゅれーしょん });

 

またそのうち頻繁に使うでしょうねー、俺がね。

カテゴリ

この記事のコメント

コメントはないです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です