it-swarm.com.de

Die Karte wird in Google Maps JavaScript API v3 nicht angezeigt, wenn sie in einem div-Tag verschachtelt ist

Ich versuche, das Tag div zu setzen, das die Karte zeigt (<div id="map-canvas"></div>) in einem anderen div, aber die Karte wird nicht so angezeigt. Handelt es sich um ein CSS- oder ein JavaScript-Problem? Oder funktioniert die API einfach so?

Hier ist mein Code mit dem verschachtelten div:

<!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>
51
user2315898

Hinzufügen style="width:100%; height:100%;" zum div sehen was das macht

nicht zum #map_canvas aber der Haupt div

beispiel

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

Es gibt hier noch einige andere Antworten, die erklären, warum dies notwendig ist

38
NodeDad

Das Problem liegt in der prozentualen Dimensionierung. Sie definieren nicht die Größe des übergeordneten Divs (des neuen Divs), sodass der Browser die Größe nicht an die Google Maps-API melden kann. Es funktioniert, wenn Sie dem Wrapper div eine bestimmte Größe oder eine Prozentgröße zuweisen, wenn die Größe des übergeordneten Elements bestimmt werden kann.

Siehe diese Erklärung aus dem Google Maps API v2-Tutorial von Mike Williams :

Wenn Sie versuchen, style = "width: 100%; height: 100%" für Ihr Map Div zu verwenden, erhalten Sie ein Map Div mit einer Höhe von Null. Das liegt daran, dass das div versucht, einen Prozentsatz der Größe des <body> Zu haben, aber standardmäßig hat das <body> Eine unbestimmte Höhe.

Es gibt Möglichkeiten, die Höhe des Bildschirms zu bestimmen und diese Anzahl von Pixeln als Höhe des Kartendivis zu verwenden. Eine einfache Alternative besteht darin, den <body> So zu ändern, dass die Höhe 100% der Seite beträgt. Wir können dies tun, indem wir style = "height: 100%" sowohl auf den <body> Als auch auf den <html> Anwenden. (Wir müssen beides tun, andernfalls versucht <body>, 100% der Höhe des Dokuments zu sein, und der Standardwert dafür ist eine unbestimmte Höhe.)

Fügen Sie die 100% Größe zu HTML und Körper in Ihrem CSS hinzu

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

Füge es inline zu Divs hinzu, die keine ID haben:

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

Ich habe dieses Problem gelöst mit:

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

FEST

Geben Sie die Anfangshöhe von div an und geben Sie die Höhe in Prozent in Ihrem Stil an.

#map {
   height: 100%;
}

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

In meinem Fall bekam ich den grauen Hintergrund und es stellte sich heraus, dass ein Zoomwert in den Kartenoptionen enthalten war. Ja, macht keinen Sinn.

9
Josef.B

Wizard

Haben Sie versucht, die Höhe und Breite des zusätzlichen Div einzustellen? Ich weiß, dass ich in einem Projekt, an dem ich arbeite, nichts in das Div einfügen werde, es sei denn, ich habe Höhe und Breite bereits eingestellt.

Ich habe Ihren Code verwendet und Höhe und Breite fest codiert, und er wird für mich angezeigt und ohne wird er nicht angezeigt.

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

Ich würde empfehlen, entweder eine feste Kodierung vorzunehmen oder dem div eine ID zuzuweisen und diese dann Ihrer CSS-Datei hinzuzufügen.

4
Nick Darley

Ich möchte nur hinzufügen, was für mich funktioniert hat, ich habe Höhe und Breite zu beiden divs hinzugefügt und bootstrap verwendet, um es reaktionsfähig zu machen

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

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

damit col-lg-1 zur Arbeit hinzufügen bootstrap Referenz befindet hier

4
wilaponce

Verstehen Sie, dass dies behoben wurde, aber die oben bereitgestellte Lösung funktioniert möglicherweise nicht in allen Situationen.

Für meinen Fall

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