Googleマップで垂直スクロールバーを表示しない

埋め込まれたGoogleマップを使用しています。ただし、overflow:hidden;を使用していますが、垂直スクロールバーは引き続き表示されます。Googleマップで垂直スクロールバーを表示しない

この問題を解決する方法はありますか？これは私のコードです：

<style> 
.map-responsive{ 
    overflow:hidden; 

    padding-bottom:56.25%; 
    position:relative; 
    height:0; 
} 
.map-responsive iframe{ 
    left:0; 
    top:0; 

    height:100%; 
    width:100%; 
    position:absolute; 
} 
</style> 

<div class="hideoverflow"> 
<div class="map-responsive"> 
<iframe width="950" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJya9E14i2xUcRLWzbVXjmqMg&key=API_KEY-WMxApjPI&zoom=15" allowfullscreen></iframe></div> 
</div>

出典

2017-09-01 J.K. Harthoorn

The problem is the outer container and padding/margin, below is a full working example: 


<html> 
<body> 
<head> 
<style> 
html , body { height: 100%; overflow:hidden; padding:0; margin:0 } 
</style> 
</head> 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d867278.573568972!2d34.331652102906006!3d31.884666128727865!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151cf2d28866bdd9%3A0xee17a001d166f686!2sPalestine!5e0!3m2!1sen!2s!4v1504401844245" 
scrolling="no" height="100%" width="100%" frameborder="0" style="border:0" allowfullscreen></iframe> 

</body> 
</html>

出典

2017-09-01 23:07:01

おかげで、それは動作します:) –

あなたは多分ルートにボックスを移動し、地図の上部真ん中にボタンを保存する方法を知っていますか？ https://gyazo.com/324dfebe47d6120b17bc1453205f2486そして、そのボックスのサイズを変更することは可能でしょうか？マップが小さくなると小さくなる可能性がありますか？ –

あなたは大歓迎です！しかし、私はあなたの2番目の質問を理解することはできません、あなたはあなたの要件をより明確にしてください？ –

Googleマップで垂直スクロールバーを表示しない

答えて

関連する問題