地圖在訪問時不顯示

我有這個HTML文件（下面）這與在這裏找到的那個幾乎相同。 https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple 地圖在訪問時不顯示

我遇到的問題是我發現任何腳本部分或HTML都沒有錯，然後我再次將此作爲志願者寫入非營利組織，並且通常不會執行此HTML或JavaScript。這個文件是由perl腳本生成的，所以請對我輕鬆一點。

讓我知道我做錯了，請！

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>e-NABLE Event Map</title> 
    <style> 
     html, body, #map-canvas { 
      height: 100%; 
      margin: 0px; 
      padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 

    function initialize() { 
     var myHome = new google.maps.Latlng(-77.675106,43.090076); 
     var mapOptions = { 
      zoom: 4, 
      center: myHome 
     }; 

     var map = new google.maps.Map(document.getElementByID('map-canvas'), mapOptions); 

     var contentString = '<div id="content">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
      '<div id="bodyContent">'+ 
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
      'sandstone rock formation in the southern part of the '+ 
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 
      'south west of the nearest large town, Alice Springs; 450&#160;km '+ 
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+ 
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 
      'Aboriginal people of the area. It has many springs, waterholes, '+ 
      'rock caves and ancient paintings. Uluru is listed as a World '+ 
      'Heritage Site.</p>'+ 
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+ 
      '(last visited June 22, 2009).</p>'+ 
      '</div>'+ 
      '</div>'; 

     var myLatlng0 = new google.maps.LatLng(-77.675106,43.090076); 

     var infowindow0 = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

     var marker0 = new google.maps.Marker({ 
      position: myLatlng0, 
      map: map, 
      title: 'e-NABLE Home Base' 
     }); 

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

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
</head> 

<body> 
    <div id="map-canvas"></div> 
</body>

來源

2014-10-06 Alex Manley

我建議你試試@ PHPGlue的代碼和標記答案接受。它爲我工作。 – amenadiel 2014-10-06 10:38:24

JavaScript是大小寫敏感的。 new google.maps.Latlng(-77.675106,43.090076)應該是new google.maps.LatLng(-77.675106,43.090076)和document.getElementByID('map-canvas')應該是document.getElementById('map-canvas')。就個人而言，我不喜歡打字google.maps或使用document.getElementById()，所以我這樣做：

var doc = document, bod = document.body, gm = google.maps; 
function E(e){ 
    return doc.getElementById(e); 
} 
var myHome = new gm.LatLng(-77.675106,43.090076); 
var canvas = E('map-canvas'); // same as document.getElementById('map-canvas');

來源

2014-10-06 03:03:04 PHPglue

很好的捕獲，但它仍然不適合我。我正在查看html文件，並且看到沒有語法錯誤，但仍然沒有顯示地圖:( – 2014-10-06 13:56:25

NVM，讓它工作，但是我的infowindows沒有顯示。關閉以解決該問題！ – 2014-10-06 14:09:14

地圖在訪問時不顯示

回答

相關問題