GoogleAPI 使わなくたって、マウスホイール拡大阻止www

レスポンシブ。GoogleMap全画面。マウスホイールでスクロール。マップにカーソルが乗ったら、どわ〜〜〜っと地図拡大。

１）pointer-events:none;。論外。 GoogleMapを埋め込む意味が・・・。

２）地図をズームするには、⌘キーを押しながらスクロールしてください。
APIの取得、登録・・・決済とか、、、お客さんが自分で管理できない。多分。私がいなくなったら、相当大変なことになる。イヤじゃ〜。

ということで、、作りました。

Make１）
position: absolute;で要素を重ねます。
「.click_cover」
position: absolute; display: block;　カバー　一番上
「iframe」
position: absolute; display: block;　iframe　グーグルマップ　真ん中
「google_map_box」
position: relative;　なんでもいいから上の2つ収めるボックス　一番下

Make２）
一番上のカバーを消すJavaScript（外部）。
$('.click_cover').click(function(){　//click_coverをクリックしたら
$('.click_cover').fadeOut();　//click_coverをフェードアウト
});
JSのフェードアウト　=　最終的にdisplay: none;

これで大丈夫なんだけど、スクロールして他のところ見て戻ってきたら、display: none;だから、またカーソルの位置でどわ〜〜〜っと拡大ToT;

Make３）
じゃぁ、地図が画面が動いたら、カバーがフェードインしてね。
最終的にdisplay: Block;

https://imasashi.net/element-fadein.html
↓ひろい物（解説間違ってるかも;;）

$(function(){
$(window).scroll(function (){　//スクロールするよ
$('.click_cover').each(function(){　//click_coverが
var elemPos = $(this).offset().top;　//click_coverの位置を「elemPos」と名付けます
var scroll = $(window).scrollTop();　//スクロールの位置は「scroll」と名付けます
var windowHeight = $(window).height();　//Windowの高さは「windowHeight」と名付けます
if (scroll > elemPos - windowHeight + 200){　//click_coverが画面内に入ってさらに200pxスクロールすると
$(this).fadeIn();　//フェードインさせます
}
});
});
});

ということらしい。

画面から出たらフェードインしておいてね。にしたいけど、、、それは宿題。

/*/*/*/*/*/*/*/*/*/　以下ソース　/*/*/*/*/*/*/*/*/*/
【HTML】
<div id="google_map_box"><!--下のボックス-->
<iframe src="グーグルマップのURL" frameborder="0" style="border:0;" allowfullscreen="" id="google_map"></iframe><!--2番目マップ-->
<div class="click_cover">
<div class="txt">ズームするには一度地図をクリックしてください。</div>
</div><!--上のカバー-->
</div>

【CSS】
#google_map_box {
position: relative;
width: 100%;
height: 500px;
}

#google_map_box iframe#google_map {
width: 100%;
height: 500px;
position: absolute;
}

#google_map_box .click_cover {
width: 100%;
height: 500px;
position: absolute;
cursor: pointer;
background-color: rgba(0,0,0,0.3);
display: block;
}

【JS】
//クリック用
$('.click_cover').click(function(){
$('.click_cover').fadeOut();
});

//再度カバーする用
$(function(){
$(window).scroll(function (){
$('.click_cover').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > elemPos - windowHeight + 200){
$(this).fadeIn();
}
});
});
});

疲れた。。。