Javascript 在谷歌地图上接收奇怪的列/形状

我正试图在谷歌地图中重建一个基本的Hello世界。在过去的一个小时里，我一直在想问题出在哪里，但就是想不出来。当试图给出一张地图时，它给出的地图带有样式不正确的地图/卫星按钮（太大），并且在页面底部有一个白色框。我想有正常样式的按钮，以及白色框去了

以下是我的JSFIDLE：

文件
正文，html{
身高：100%；
保证金：0；
填充：0；
}
div{
身高：70%；
}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：13，
中心：{lat:-33，lng:151}，
mapTypeControl:true，
scaleControl：对
});
}

您的css没有做您想做的事情。此规则影响所有div元素：

div {
height: 70%;
}

将其更改为（如果您只希望它影响“map”div）：

代码片段：

body，
html{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：70%；
}

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：13，
中心：{
拉脱维亚：-33，
液化天然气：151
},
mapTypeControl:true，
scaleControl：对
});
}

哦，我的上帝。非常感谢。我什么都试过了。出于好奇，为什么div-css不工作？b/c都应该针对那个特定的div？它针对页面上的所有div，包括地图上的所有div。。。

div {
height: 70%;
}

#map {
height: 70%;
}