地圖不加載到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; 
}