Map ne s'affiche pas

**cdevl37** · 02/03/2020, 20h30

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
    });
}

**NoSmoking** · 03/03/2020, 11h46

Bonjour,
vérifie que le style est bien pris en compte et notamment height: 100vh.

**cdevl37** · 04/03/2020, 00h08

Bonsoir,

sa fonctionne mes le soucis c'est que j'ai ma map en mode development ?

Avez vous une idée ?

ma map : http://www.cyberstaff.be/cars/map.html

**NoSmoking** · 04/03/2020, 10h00

Effectivement, cela n'a rien à voir

Voir et suivre les indications vues dans la console, F12

You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started

Tu peux peut-être faire la même chose, sans clé, avec Leaflet.

**cdevl37** · 04/03/2020, 19h30

Bonsoir,

Merci à vous pour votre réponse je vais essayer Leaflet

Map ne s'affiche pas [Google Maps]

APIs Google

Discussions similaires

Partager

Partager