Я боролся с проблемой отображения карты с местоположением с помощью Google Map API. Как вы видите на странице результатов, данные из бэкэнда отображаются правильно, например house_lan и house_lng , но карта с местоположением не отображается. Подскажите, что я упустил?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<title>Local Schools</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous"
/>
<script
async
defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"
type="text/javascript"
></script>
<script type="text/javascript">
function initMap() {
new google.maps.Map(document.getElementById('map'), {
center: {lat: {{house.lat}}, lng: {{house.lng}}},
zoom: 16
});
}
</script>
</head>
<body>
<div class="container">
<h1>{{house.id}}</h1>
<div id="map" style="width: 100%; height: 500px;"></div>
{{house.lat}} ---- {{house.lng}}
</div>
</body>
</html>
введите описание изображения здесь