Моя карта создана, но не может быть отображена

Question

Я могу показать только карту, это странно, потому что это работает только тогда, когда id моего div - это map, когда я добавляю другой 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, я не зарегистрировал свой платежный аккаунт, в этом причина?

Answer 1

Убедитесь, что вы изменили имя класса CSS на map1

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

рабочий код с map1 в качестве идентификатора в файле css Jsfiddle