Google地圖內部多個div不顯示

我在我的網頁上嵌入Google地圖，但它只顯示灰色，沒有實際的地圖。Google地圖內部多個div不顯示

的谷歌地圖是一個<section>內內的多個<div>。下面是代碼：

<section id="contact" class="container dark second"> 
    <div class="content"> 
    <div class="title icon-phone"> 
     <h1>Contact <span>We would like to hear from you.</span></h1> 
     <!--<div class="description"> <a href="#"><img src="images/icons/instagram.png" alt="" class="social"></a> <a href="#"><img src="images/icons/flickr.png" alt="" class="social"></a> <a href="#"><img src="images/icons/dribbble.png" alt="" class="social"></a></div>--> 
    </div> 
    <div class="full"> 
     <div id="contact-form"> 
     <form id="contact-us" action="email.php" method="post"> 
      <div class="column-half"> 
      <div class="formblock"> 
       <input type="text" name="name" id="contactName" class="txt requiredField" placeholder="Name:"> 
      </div> 
      <div class="formblock"> 
       <input type="text" name="position" id="contactName" class="txt requiredField" placeholder="Position:"> 
      </div> 
      <div class="formblock"> 
       <input type="text" name="company" id="contactName" class="txt requiredField" placeholder="Company:"> 
      </div> 
      <div class="formblock"> 
       <input type="text" name="email" id="email" class="txt requiredField email" placeholder="Email:"> 
      </div> 
      <div class="formblock"> 
       <input type="text" name="contact" id="website" class="txt website" placeholder="Contact No.:"> 
      </div> 
      <div class="formblock"> 
       <select name="category"> 
       <option value="">--Select Message Category--</option> 
       <option value="Feedback">Feedback</option> 
       <option value="Inquiry">Inquiry</option> 
       <option value="Support">Support</option> 
       </select> 
      </div> 
      <div class="formblock"> 
       <textarea name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:"></textarea> 
      </div> 
      <button name="submit" type="submit" class="subbutton"></button> 
     </form> 
      </div> 
      <div class="column-half last"> 
         <div id="map-canvas"> 
         <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
          <div style="overflow:hidden;height:100%;width:100%;"> 
           <div id="gmap_canvas" style="height:100%;width:100%;"></div> 
            <style>#gmap_canvas img{max-width:none!important;background:none!important}</style> 
          </div> 
         <script type="text/javascript"> 
          function init_map(){ 
           var myOptions = {zoom:17,center:new google.maps.LatLng(14.575681,120.993867),mapTypeId: google.maps.MapTypeId.ROADMAP}; 
           map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions); 
           marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(14.575681, 120.993867)}); 
           infowindow = new google.maps.InfoWindow({content:"<b>Columbia Technoologies, Inc.</b><br/>1136 - 1146 J. Nakpil St. Malate, Manila" }); 
           google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map); 
         </script> 
         </div> 
      <!-- </div>--> 
      <p>Contact Us</p> 
      </div> 
     </div> 
    </div> 
    </div> 
</section>

我已經嘗試設置height:100%到<html>，<body>和所有家長的#gmap_canvas<div>但無濟於事。

奇怪的是，我試圖隔離上述地圖代碼，它工作的很好！

<!DOCTYPE html> 
<head> 
    <title>Contact Template</title> 
    <meta name="keywords" content="" /> 
    <meta name="description" content="" /> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="bw/css/templatemo_style.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
         <div id="map-canvas"> 
         <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
          <div style="overflow:hidden;height:100%;width:100%;"> 
           <div id="gmap_canvas" style="height:100%;width:100%;"></div> 
            <style>#gmap_canvas img{max-width:none!important;background:none!important}</style> 
            <a class="google-map-code" href="http://www.trivoo.net/gutscheine/deichmann/" id="get-map-data">trivoo.net</a> 
          </div> 
         <script type="text/javascript"> 
          function init_map(){ 
           var myOptions = {zoom:17,center:new google.maps.LatLng(14.575681,120.993867),mapTypeId: google.maps.MapTypeId.ROADMAP}; 
           map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions); 
           marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(14.575681, 120.993867)}); 
           infowindow = new google.maps.InfoWindow({content:"<b>Columbia Technoologies, Inc.</b><br/>1136 - 1146 J. Nakpil St. Malate, Manila" }); 
           google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map); 
         </script> 
         </div> 


</body> 
</html>

我還包裹隔離代碼<section>和多個<div>的內部，並且仍在工作，雖然我沒有從第一網頁把CSS文件。

可能是什麼問題？

來源

2017-02-22 xjshiya

CSS是問題...您的地圖div沒有大小（將其定義爲100％沒有大小的東西不起作用，您必須一直到html/body或固定大小的div）（[fiddle]（http://jsfiddle.net/geocodezip/6npmm49d/1/）） – geocodezip

[Map嵌套在div中時未在Google Maps JavaScript API v3上顯示標籤]（http://stackoverflow.com/questions/16349476/map-isnt-showing-on-google-maps-javascript-api-v3-when-nested-in-a-div-tag） – geocodezip

@geocodezip試過你的小提琴，無濟於事。 – xjshiya

更新：

奇怪的是，我將它通過引用在我的網頁的<head>我所有的CSS和JavaScript代碼（工作在<head>上引用了CSS代碼，但在代碼</body>之前引用了JavaScript代碼）。

我不確定我的哪些JavaScript代碼會影響Google Map的行爲，但是，如果它正在工作，那麼它不是愚蠢的！

來源

2017-02-23 09:02:57 xjshiya

使用％單位似乎是一個問題。它應該工作，如果你觸發resize事件：

jQuery(document).ready(function() { 
    // resize map on window resize 
    jQuery(window).resize(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }); 

    // resize map 
    google.maps.event.trigger(map, 'resize'); 
});

來源

2017-02-22 03:02:14

仍然無法正常工作。 – xjshiya

Google地圖內部多個div不顯示

回答

相關問題