Google карты не загружается должным образом

Question

я буду вести с изображением:

Это то, что возвращается, когда я создаю мои карты Google встраивать с API.

Моего JS

var map; 

    function initMap(){ 
     map = new google.maps.Map(document.getElementById('maphere'), { 
      center: {lat: -81.378373, lng: 28.536156}, 
      zoom: 18 
     }); 
    } 

мой HTML:

<div id="hideMapOverflow"> 
    <div id="maphere" style="height:100%"></div> 
</div> 

И CSS, что идет с ним:

#hideMapOverflow{ 
    overflow:hidden; 
    height:500px; 
    width:100%; 
} 
#maphere{ 
    height:100%; 
} 

Отображение компоненты, кажется, сработали, но сама карта ISN «т. Я что-то пропустил?

Answer 1

Ваша широта и долгота назад.

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('maphere'), { 
 
    center: { 
 
     lng: -81.378373, 
 
     lat: 28.536156 
 
    }, 
 
    zoom: 18 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

#hideMapOverflow { 
 
    overflow: hidden; 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 
#maphere { 
 
    height: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="hideMapOverflow"> 
 
    <div id="maphere" style="height:100%"></div> 
 
</div>