Bonsoir,

je voudrais afficher une map dans ma page map.html et il ne se passe rien, avez vous une idée ?

j'ai créer un répertoire map avec les fichiers map.html, style.css et app.js et map.html est appelé via index.html

index.html

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
<div class="block">
            <header class="header">
                <a href="#" class="header-logo">Mon Portfolio</a>
                <nav class="header-menu">
                    <a href="#">Accueil</a>
                    <a href="map/map.html">A propos</a>
                    <a href="#">Mes travaux</a>
                    <a href="#">Contact</a>
                </nav>
            </header>
        </div>

voici mon code :

map.html :

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
        <title>Google map</title>
        <link rel="stylesheet" type="text/css" href="map/style.css">
    </head>
    <body>
        <div id="map"></div>
 
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCB5XUHiHxNPuW75WsgCv3V0smuFaWNpxk&callback=initMap"
             async defer></script>
        <script type="text/javascript" src="map/app.js"></script>
    </body>
</html>

style.css :

Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
html, body{
    padding: 0;
    margin: 0;
}
 
#map {
    height: 100vh;
    width: 100%;
}


app.js :

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
var map;
// initialiser map
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 50.8595915,
            lng: 4.5136486
        },
        zoom: 8
    });
}