时间戳

首页 > 解决方案 > Google Maps API 地图未显示

javascript - Google Maps API 地图未显示

问题描述

所以也许这个错误非常幼稚，但我无法从 Google Maps 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,
});
}

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

标签： javascripthtmlgoogle-mapsgoogle-maps-api-3

解决方案

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>

推荐阅读