地图不加载到HTML页面

Question

我有一张地图，我想加载到HTML页面，地图的文件位于应用程序文件夹，但不加载。这里是插入地图的地方代码

<!-- Contact section start --> 
    <div id="contact" class="contact"> 
     <div class="section "> 
      <div class="container"> 
       <div class="title"> 
        <h1>Contact Us</h1> 
        <p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p> 
       </div> 
      </div> 
      <div class="map-wrapper"> 
       <div class="map-canvas" id="map-canvas">Loading map...</div> 
       <div class="container"> 
        <div class="row-fluid"> 
         <div class="span5 contact-form centered"> 
          <h3>Say Hello</h3> 
          <div id="successSend" class="alert alert-success invisible"> 
           <strong>Well done!</strong>Your message has been sent.</div> 
          <div id="errorSend" class="alert alert-error invisible">There was an error.</div> 
          <form id="contact-form" action="php/mail.php"> 
           <div class="control-group"> 
            <div class="controls"> 
             <input class="span12" type="text" id="name" name="name" placeholder="* Your name..." /> 
             <div class="error left-align" id="err-name">Please enter name.</div> 
            </div> 
           </div> 
           <div class="control-group"> 
            <div class="controls"> 
             <input class="span12" type="email" name="email" id="email" placeholder="* Your email..." /> 
             <div class="error left-align" id="err-email">Please enter valid email adress.</div> 
            </div> 
           </div> 
           <div class="control-group"> 
            <div class="controls"> 
             <textarea class="span12" name="comment" id="comment" placeholder="* Comments..."></textarea> 
             <div class="error left-align" id="err-comment">Please enter your comment.</div> 
            </div> 
           </div> 
           <div class="control-group"> 
            <div class="controls"> 
             <button id="send-mail" class="message-btn">Send message</button> 
            </div> 
           </div> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="span9 center contact-info"> 
        <p style="color:black;">123 Fifth Avenue, 12th,Belgrade,SRB 11000</p> 
        <p class="info-mail">ourstudio@somemail.com</p> 
        <p style="color:black;">+11 234 567 890</p> 
        <p style="color:black;">+11 286 543 850</p> 

       </div> 

      </div> 
     </div> 
    </div> 
    <!-- Contact section edn --> 

这里是js文件，它具有加载地图所需的所有代码。

//Initialize google map for contact setion with your location. 

function initializeMap() { 

var lat = '44.8164056'; //Set your latitude. 
var lon = '20.46090424'; //Set your longitude. 

var centerLon = lon - 0.0105; 

var myOptions = { 
    scrollwheel: false, 
    draggable: false, 
    disableDefaultUI: true, 
    center: new google.maps.LatLng(lat, centerLon), 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

//Bind map to elemet with id map-canvas 
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); 
var marker = new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(lat, lon), 
}); 

var infowindow = new google.maps.InfoWindow(); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map, marker); 
}); 

infowindow.open(map, marker); 
google.maps.event.addDomListener(window, 'load', initializeMap); 

}

我看到有类似的问题，但其他固定他们是通过键入优化：在标记区域虚假的，但对我来说，仍然没有工作。

Answer 1

你有两个问题：

1. 你叫google.maps.event.addDomListener(window, 'load', initializeMap);内initializeMap()本身 - 那么自然地图是永远不会初始化。

2. 您需要设置一些尺寸#map-canvas;即使问题＃1不是这种情况，地图也永远不会显示。

当这两个问题被纠正它的工作原理 - >http://jsfiddle.net/1fdzz7gv/

小提琴具有完全相同的代码作为OP，除了google.maps.event.addDomListener(window, 'load', initializeMap);放在外面initializeMap()和#map-canvas已经给出了一些尺寸

#map-canvas { 
    width: 300px; 
    height: 200px; 
}