-2

I can only show a map, it's weird because this only works when the id of my div is map when I put another id that is not map that is created but not shown

this code works, creates the map and shows it

<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
});

works

but this code does not work, when I inspect the div, I create the map but it does not show it

<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
    });

this does not work

although I delete the previous code and only leave map1, it still does not work, this only works when in the id of the div I have map

Could someone tell me what I'm doing wrong ?, I just generated my api key, I have not registered my billing account, that's the reason?

Alejandro Cortés
  • 13
  • 4
  • Not 100% sure but check this out. https://stackoverflow.com/questions/16349476/map-isnt-showing-on-google-maps-javascript-api-v3-when-nested-in-a-div-tag – Arundeep Chohan Jun 21 '19 at 02:28

1 Answers1

0

Make sure you have changed your CSS class name to map1

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

working code with map1 as id in css file Jsfiddle

gcodess
  • 150
  • 5