Google 地图 API 地图未显示

Question

所以也许这个错误很天真，但我无法从 Google 地图 API.

加载 javascript 地图

我想要完成的是让地图出现在按钮的右侧。但是...我不能。

这是我的代码。

HTML

<!DOCTYPE html>
<html>
<head>
<title>salgamos</title>
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/en_corto.css') }}">
<script> </script>
</head>
<body>
<div class="domainhome">
    <a href="/"><p>salgamos.com.mx</p></a>
</div>

<div class="flex-container">
    <div class="left-bar">
        <div>
            <button class="adondequieresir"><p>¿a dónde quieres ir?</p></button>
        </div>

        <div>
            <button class="agregarubicacion">
                <p style="float: left;">¡agrega tu ubicación?</p>
            </button>
        </div>
        <div>
            <button class="personasunidas">
                <p style="float: left;">(n) personas unidas</p>
            </button>
        </div>
    </div>

    <div class="right-bar">
        <div id="map">
            <script
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAz5lUQhWbnyya36w_UiP-DjcdGj6Sfw&callback=initMap&libraries=&v=weekly"
                async
            ></script>
        </div>
    </div>
</div>

JS

let map;

function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}

我找到了类似的帖子，但事情要复杂得多，他们的回答只会让我感到困惑。如果有人能帮助我，我将不胜感激。

Answer 1

script 标签不应包含在 div#map 标签内。

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzw5lUQhZWbnyya36w_UiP-DjcdGj6Sfw&callback=initMap&libraries=&v=weekly" async></script>

Google 地图 API 地图未显示

Google Maps API map not showing

html

javascript

google-maps

google-maps-api-3