时间戳

首页 > 解决方案 > 我的地图已创建但无法显示

google-maps - 我的地图已创建但无法显示

问题描述

我只能显示一个地图，这很奇怪，因为这仅在我的 div 的 id 是地图时才有效，而当我放置另一个不是已创建但未显示的地图的 id 时

此代码有效，创建地图并显示它

<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，但它仍然不起作用，这只适用于id我div拥有的map

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

标签： google-mapsgoogle-maps-api-3

解决方案

确保您已将 CSS 类名称更改为 map1

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

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

推荐阅读