Googleマップで奇妙な列/図形を受け取る

-1

Googleマップで基本的なHello Worldを再作成しようとしています。私は問題が何であるか把握するために最後の1時間を試みてきましたが、できません。地図を表示しようとすると、ページの下部にある白いボックスとともに、地図/サテライトのボタンが不適切に（大きすぎる）スタイルの地図が表示されます。私は、ボタンを通常はスタイリングし、白いボックスは消してしまいたいと思います。Googleマップで奇妙な列/図形を受け取る

次は私のjsFIddleです：https://jsfiddle.net/rich22/m84kwtwv/

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <style> 

body, html { 
height: 100%; 
margin:0; 
padding:0; 
} 

div{ 
height: 70%; 
} 
</style>  

</head> 

<body> 

    <div id="map"></div> 

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAT4rwfJEdapVoq-EvUDeFjquATnLnhYZI&callback=initMap" 
    type="text/javascript"></script> 
    <script> 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 13, 
    center: {lat: -33, lng: 151}, 
    mapTypeControl: true, 
    scaleControl: true 
    }); 
} 
</script> 

</body> 
</html>

出典

2016-08-27 the12

あなたのCSSは、あなたが望むものをやっていません。（あなただけそれが "マップ" に影響する場合DIV）へ

div { 
height: 70%; 
}

変更、それを：：

#map { 
height: 70%; 
}

updated fiddle

コードスニペットこの規則は、すべて div要素に影響します。

body, 
 
html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 70%; 
 
}

<div id="map"></div> 
 
<script> 
 
    function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 13, 
 
     center: { 
 
     lat: -33, 
 
     lng: 151 
 
     }, 
 
     mapTypeControl: true, 
 
     scaleControl: true 
 
    }); 
 
    } 
 
</script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAT4rwfJEdapVoq-EvUDeFjquATnLnhYZI&callback=initMap" type="text/javascript">

出典

2016-08-27 02:23:06 geocodezip

ああ私の神。ありがとうございました。私はすべてを試みた。好奇心のために、なぜdivをCSS化しないのですか？ b/c両方ともその特定のdivをターゲットにしているはずですか？ – the12

地図上にあるものも含めて、**すべての**ページ上のdivをターゲティングしています... – geocodezip

Googleマップで奇妙な列/図形を受け取る

答えて

関連する問題