web-dev-qa-db-fra.com

La carte ne s'affiche pas dans l'API JavaScript Google Maps v3 lorsqu'elle est imbriquée dans une balise div

J'essaie de mettre la balise div qui montre la carte (<div id="map-canvas"></div>) dans un autre div, mais la carte n’a pas cette apparence. Est-ce un problème de CSS ou de JavaScript? Ou est-ce simplement la façon dont fonctionne l'API?

Voici mon code avec le div imbriqué:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div> <!-- ommiting this div will show the map -->
        <div id="map-canvas"></div>
    </div>
</body>
</html>
javascriptgoogle-maps-api-3
51
user2315898

Ajouter style="width:100%; height:100%;" au div voir ce que ça fait

pas au #map_canvas mais la div principale

exemple

<body>
    <div style="height:100%; width:100%;">
         <div id="map-canvas"></div>
    </div>
</body>

Il y a quelques autres réponses ici expliquer pourquoi c'est nécessaire

38
NodeDad

Le problème est avec la taille en pourcentage. Vous ne définissez pas la taille du div parent (le nouveau), le navigateur ne peut donc pas en signaler la taille à l'API Google Maps. Donner au diviseur une taille spécifique, ou un pourcentage si la taille de son parent peut être déterminée, fonctionnera.

Voir cette explication du didacticiel de Google Maps API v2 de Mike Williams :

Si vous essayez d'utiliser style = "width: 100%; height: 100%" sur votre div de carte, vous obtenez un div de carte de hauteur zéro. C'est parce que la div essaie d'être un pourcentage de la taille de la <body>, mais par défaut le <body> a une taille indéterminée.

Il existe des moyens de déterminer la hauteur de l'écran et d'utiliser ce nombre de pixels comme hauteur du div de la carte, mais une alternative simple consiste à modifier le paramètre <body> pour que sa hauteur soit égale à 100% de la page. Nous pouvons le faire en appliquant style = "height: 100%" à la fois le <body> et le <html>. (Nous devons le faire aux deux, sinon le <body> essaie de représenter 100% de la hauteur du document, la valeur par défaut étant une hauteur indéterminée.)

Ajoutez la taille 100% au html et au corps dans vos css

    html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

Ajoutez-le en ligne à tous les divs qui n'ont pas d'identifiant:

<body>
  <div style="height:100%; width: 100%;"> 
    <div id="map-canvas"></div>
  </div>
</body>
46
geocodezip

J'ai résolu ce problème avec:

    <div id="map" style="width: 100%; height: 100%; position: absolute;">
                 <div id="map-canvas"></div>
     </div>
22
ramazan polat

FIXÉ

Donnez la hauteur initiale de div et spécifiez la hauteur en pourcentage dans votre style;

#map {
   height: 100%;
}

<div id="map" style="clear:both; height:200px;"></div>
11
Yergalem

Dans mon cas, j’obtenais un fond gris et il s’est avéré qu’il s’agissait d’inclure une valeur de zoom dans les options de la carte. Ouais, ça n'a aucun sens.

9
Josef.B

Wizard

Avez-vous essayé de régler la hauteur et la largeur de la div supplémentaire, je sais que sur un projet sur lequel je travaille, JS ne mettra rien dans la div, sauf si la hauteur et la largeur sont déjà définies.

J'ai utilisé votre code et codé en dur la hauteur et la largeur et il apparaît pour moi et sans cela ne montre pas.

<body>
    <div style="height:500px; width:500px;"> <!-- ommiting the height and width will not show the map -->
         <div id="map-canvas"></div>
    </div>
</body>

Je recommanderais soit de le coder en dur, soit d'attribuer un identifiant à la div, puis de l'ajouter à votre fichier CSS.

4
Nick Darley

Je veux juste ajouter ce qui a fonctionné pour moi, j'ai ajouté hauteur et largeur aux deux divs et utilisé bootstrap pour le rendre réactif

   <div class="col-lg-1 mapContainer">
       <div id="map"></div>
   </div>

   #map{
        height: 100%;
        width:100%;
   }
   .mapContainer{
        height:200px;
        width:100%
   }

pour col-lg-1 to work add bootstrap référence située ici

4
wilaponce

Comprenez que cela a été résolu, mais que la solution fournie ci-dessus peut ne pas fonctionner dans toutes les situations.

Pour mon cas

<div style="height: 490px; position:relative; overflow:hidden">
    <div id="map-canvas"></div>
</div>
0
Sem