ウェブサイトに埋め込んだgooglemapのスマホでの動きを直したいです。

Question

###前提・実現したいこと
現在ワードプレスサイトの固定ページにgooglemapを埋め込んだのですが、そのgooglemapの動きを 直したいです。
表示は全く問題ないのですが、スマホで見た場合のみ何故かmapの下までウィンドウが移動してしまいます。
どなたか教えて下さると大変助かります。
よろしくお願い致します。
###発生している問題・エラーメッセージ
http://createcat.xsrv.jp/長野バス釣りスポット/
このページのmapなのですが、スマホで地図上の赤いポイントをクリックすると、左からスライドしてポイントの別ウィンドウが開かれるのですが、開かれたウィンドウを閉じようと左矢印をクリックすると、
mapの下まで移動してしまいます。
pcの時は問題ないのですが、スマホの時だけmapの下まで移動してしまいます。

###該当のソースコード
html,

<div class="iframe"><iframe src="https://www.google.com/maps/d/embed?mid=1TVpiVsuENIgVG48SWZYmsBRBKUc&amp;hl=ja" width="640" height="480"></iframe></div>

css
.iframe{
position:relative;
width:100%;
width:640px;
height:400px;
}
.iframe iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}
###試したこと
課題に対してアプローチしたことを記載してください
width,paddingなどの変更

Answer 1

スマホ＝iPhoneでしょうか？
多分、以下の質問と同じ事だと思います。
https://teratail.com/questions/81195
遅延ロードとか色々と書いてますがcreate_catさんのサイトには関係ないと思うので、要点はCSSで誤魔化す、ただそれだけです。

Comments

[create_cat]

ありがとうございます。大変助かりました。
しかし、この方法ですと、スクロールにより出現するページトップヘ飛ぶリンクが使えなくなってしまいました。
今回のページはそれほど長いページではないので、このページにだけ利用致したいと思います。
ありがとうございました。