複数のdiv内のGoogleマップが表示されない

Googleマップをウェブページに埋め込んでいますが、実際の地図が表示されていない灰色で表示されています。複数のdiv内のGoogleマップが表示されない

Googleマップは<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>内部に孤立したコードをラップしている、と私は最初のWebページからCSSファイルを入れていなかったものの、それはまだ、働いています。

何が問題なのですか？

出典

2017-02-22 xjshiya

CSSが問題です...あなたのマップdivにはサイズがありません（サイズがないものの100％として定義されていますが、あなたはhtml/bodyまたは固定サイズdiv）（[fiddle]（http://jsfiddle.net/geocodezip/6npmm49d/1/）） – geocodezip

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

更新：不思議な

、私は私のWebページの<head>にすべての私のCSSやJavaScriptのコードを参照することで、それが仕事作りました（ CSSコードは<head>で参照されましたが、JavaScriptコードは</body>の前に参照されていました）。

私のJavaScriptコードのどれがそのように動作するようになったのかわかりませんが、動作していればそれは馬鹿ではありません！

出典

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

複数のdiv内のGoogleマップが表示されない

答えて

関連する問題