Search code examples
javascripthtmlgoogle-mapsgoogle-maps-api-3

Google Maps API map not showing

So maybe this mistake is pretty naïve, but I can't load a javascript map from the Google Maps API.

What I'm trying to accomplish is to make a map appear at the right side of the buttons. But...I can't.

Here's my code.

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=YOUR_API_KEY&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,
});
}

I've found similar posts, but for things far more complex, and their answers only confused me. I would kindly appreciate if someone could help me.

Solution

  • The script tag should not be wrapped inside the div#map tag.

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