谷歌地圖不可見在HTML

Question

我試圖在我的HTML包括谷歌地圖。但地圖沒有得到顯示div部分空白屏幕截圖如下。同時在下面找到代碼。

CSS代碼：

#location article{ 
    padding:1.5%; 
    width:97%; 
} 
.tab-content .gmap{ 
    width:100%; 
    height:450px; 
} 
.map-wrap{ 
    width:97%; 
    padding:1.5%; 
    background:#fff; 
    webkit-box-shadow:0 0 2px rgba(0,0,0,0.1); 
    -moz-box-shadow:0 0 2px rgba(0,0,0,0.1); 
    box-shadow:0 0 2px rgba(0,0,0,0.1); 
} 
.map-wrap .infoBox{ 
    background:url(../images/map-popup.png) no-repeat !important; 
    width:180px !important; 
    height:100px !important; 
} 
.gmap{ 
    border:1px solid #ccc; 
    display:block; 
    width:100%; 
    height:550px; 
} 
.gmap .infoBox{ 
    background:url(../images/map-popup-hotel.png) no-repeat; 
    width:184px; 
    height:120px; 
    } 
.gmap strong{ 
    font:normal 14px 'KabelBkBTBook',sans-serif; 
    margin:0 0 13px; 
    display:inline-block; 
} 
.infoBox{ 
    font:normal 1.2em/1.42 'KabelBkBTBook',sans-serif; 
    margin:-100px 0 0 50px; 
    display:inline-block; 
    padding: 8px 10px; 
    color:#fff; 
} 

JavaScript代碼：

<script type="text/javascript"> 
    function initialize() { 
     var secheltLoc = new google.maps.LatLng(49.47216, -123.76307); 

     var myMapOptions = { 
      zoom: 15 
      ,center: secheltLoc 
      ,mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions); 


     var marker = new google.maps.Marker({ 
      map: theMap, 
      draggable: true, 
      position: new google.maps.LatLng(49.47216, -123.76307), 
      visible: true 
     }); 

     var boxText = document.createElement("div"); 
     boxText.innerHTML = "<strong>MGH World</strong><br />1400 Pennsylvania Ave,<br />Washington DC<br />www.bestipsumhotel.com"; 

     var myOptions = { 
      content: boxText 
      ,disableAutoPan: false 
      ,maxWidth: 0 
      ,pixelOffset: new google.maps.Size(-140, 0) 
      ,zIndex: null 
      ,closeBoxURL: "" 
      ,infoBoxClearance: new google.maps.Size(1, 1) 
      ,isHidden: false 
      ,pane: "floatPane" 
      ,enableEventPropagation: false 
     }; 

     google.maps.event.addListener(marker, "click", function (e) { 
      ib.open(theMap, this); 
     }); 

     var ib = new InfoBox(myOptions); 
     ib.open(theMap, marker); 
    } 
</script> 

HTML代碼：

  <div id="location" class="tab-content"> 
       <article> 
        <!--map--> 
         <div class="gmap" id="map_canvas"></div> 
        <!--//map--> 
       </article> 
      </div> 

附加腳本：

[附加腳本的HTML正文] [1 ]

Answer 1

您的代碼返回錯誤：

Uncaught ReferenceError: InfoBox is not defined 

還有就是信息框源沒有鏈接像

<script src='../../js/infobox.js'></script> 

另外，我不認爲如果有一個調用來加載地圖狀

... 
     ,enableEventPropagation: false 
    }; 

    var ib = new InfoBox(myOptions); 
    //ib.open(theMap, marker); 

    google.maps.event.addListener(marker, "click", function (e) { 
     ib.open(theMap, this); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

查看完整code at jsbin。