Mapa nie jest wyświetlana w Google Maps JavaScript API v3 po umieszczeniu w znaczniku div

Próbuję umieścić znacznik div, który pokazuje mapę (<div id="map-canvas"></div>) wewnątrz innego div, ale nie pokazuje mapy w ten sposób . Czy jest to problem z CSS lub JavaScript? A może tak działa API?Mapa nie jest wyświetlana w Google Maps JavaScript API v3 po umieszczeniu w znaczniku div

Oto mój kod z zagnieżdżonego 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>

Źródło

2013-05-02 Anonymous

spróbuj podać, że dział identyfikator zobaczyć co to robi dla Ciebie, nigdy nie ive miał tego problemu mogę pracować z mapą Google codziennie ... –

@AaronRussell: Nic się nie dzieje, to nadal nie jest wyświetlana. –

w porządku hm ... dodaj 'style =" szerokość: 100%, wysokość: 100%; "' do div zobacz, co robi tat ... (nie do mapy div, do div zewnętrznych) –

Dodaj style="width:100%; height:100%;" do div zobaczyć co to robi

nie do #map_canvas ale głównym div

przykład

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

Istnieje kilka innych odpowiedzi dotyczące tu wyjaśnić, dlaczego jest to konieczne

Źródło

2013-05-02 23:52:44

Hi Twoje rozwiązanie nie działa dla mnie http://stackoverflow.com/questions/42823800/google-map-appears-after-browser-size-changes Please spójrz na pytanie –

Problem jest z procentowego rozmiaru. Nie określasz rozmiaru div rodzicielskiego (nowego), więc przeglądarka nie może zgłosić rozmiaru do interfejsu API Map Google. Nadanie opakowanemu elementowi div określonego rozmiaru lub rozmiaru procentowego, jeśli można określić rozmiar jego obiektu nadrzędnego, będzie działało.

Zobacz this explanation from Mike Williams' Google Maps API v2 tutorial:

Jeśli spróbujesz użyć style = "width: 100%; height: 100%" na mapie div, masz div mapę, która ma zerowy wzrost. To jest , ponieważ element div próbuje być procentem rozmiaru <body>, ale domyślnie <body> ma nieokreśloną wysokość .

Istnieją sposoby określania wysokości ekranu i użycia tej liczby pikseli jako wysokości div mapy, , ale prostą alternatywą jest zmiana <body>, tak aby jej wysokość wynosiła 100% strony. Możemy to zrobić przez stosując style = "height: 100%" zarówno dla <body> i <html>. (Musimy to zrobić zarówno, w przeciwnym razie <body> stara się być 100% wysokości dokumentu, a domyślną że jest nieokreślona wysokość.)

Dodaj rozmiaru 100% do HTML i ciało w css

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

Dodaj go inline wszelkich div, które nie mają ID:

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

Źródło

2013-05-02 23:50:33 geocodezip

Kreatora

Czy próbowałeś ustawić wysokość i szerokość dodatkowego elementu div, Wiem, że na projekcie, nad którym pracuję, JS nie wstawi niczego do elementu div, chyba że mam już ustawioną wysokość i szerokość.

Użyłem twojego kodu i zakodowanych na sztywno wysokości i szerokości, a to pokazuje się dla mnie i bez tego się nie pokazuje.

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

Polecam albo na sztywne kodowanie go lub przypisanie div ID, a następnie dodać go do pliku CSS.

Źródło

2013-05-02 23:51:17

Dla mnie wystarczyło dodanie wysokości (div wychodził z zerową wysokością). –

ale nie sądzisz, że określenie 'px' zakłóci reakcję? – ImranNaqvi

Rozwiązałem ten problem z:

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

Źródło

2013-09-24 14:09:55

To zadziałało dla mnie '

' bez stylu in-line, który był domyślnie pozycjonowany względnie i wyświetlał pusty ekran. –

W moim przypadku otrzymałem szare tło i okazało się, że uwzględniono wartość powiększenia w opcjach mapy. Tak, nie ma sensu.

Źródło

2014-12-06 20:55:57

Chcę tylko dodać, co pracował dla mnie, dodałem wysokość i szerokość do obu div i używane bootstrap aby czuły

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

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

w celu col-lg-1 pracować dodać bootstrap odniesienie znajdujący Here

Źródło

2017-03-16 22:47:27 wilaponce

NAPRAWIONO

Nie mogę ci powiedzieć, jak ta drobna sprawa zabrała mi wiele godzin; Podaj wysokość początkową elementu div i określ wysokość w procentach w swoim stylu;

#map { 
    height: 100%; 
} 

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

Źródło

2017-04-26 14:44:09 Yergalem

Mapa nie jest wyświetlana w Google Maps JavaScript API v3 po umieszczeniu w znaczniku div

Odpowiedz

Powiązane problemy