Google maps 我的地图已创建，但无法显示

我只能显示一个映射，这很奇怪，因为只有当我的div的id是map时，当我放置另一个id时，它才起作用，而这个id不是创建但未显示的map

这段代码工作，创建地图并显示它

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

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(20.967370, -89.592586),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

但是这段代码不起作用，当我检查div时，我创建了映射，但它没有显示它

<div id="map1"></div>

    var map = new google.maps.Map(document.getElementById('map1'), {
        zoom: 13,
        center: new google.maps.LatLng(20.967370, -89.592586),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

虽然我删除了前面的代码，只留下map1，但它仍然不起作用，这只在div的id中有map时起作用

有人能告诉我我做错了什么吗？我刚刚生成了api密钥，我还没有注册我的账单帐户，这就是原因

确保已将CSS类名更改为map1

---

在css文件中使用map1作为id的工作代码

不是100%确定，但请检查此项。

#map1 {
    height: 300px;
    width: 600px;
    background-color: #CCC;
}