Question

我在我的网页上嵌入了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＆gt;和<div>的所有父#gmap_canvas但无济于事。

奇怪的是，我试图隔离所说的地图代码，它工作正常！

<!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文件。

可能是什么问题？

Answer 1

使用％unit时似乎是一个问题。如果您触发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');
});

Answer 2

<强>更新

奇怪的是，我通过在我的网页的<head>上引用我的所有CSS和JavaScript代码使其成功（CSS代码在<head>上被引用，但之前引用了JavaScript代码</body>）。

我不确定我的哪些JavaScript代码会影响谷歌地图这样做，但是，如果它正在运作那么它并不愚蠢！

谷歌地图内部多个div没有显示

2 个答案: