將谷歌地圖嵌入到一個頁面中：雖然HTML中存在地圖，但不能看到

-1

我試圖在本地開發環境（WAMP）中使用http://code.google.com/p/jquery-ui-map/嵌入谷歌地圖。將谷歌地圖嵌入到一個頁面中：雖然HTML中存在地圖，但不能看到

我已經加載所需的所有腳本：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/10/22/main.js" type="text/javascript"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script type="text/javascript" src="/app_dev.php/js/fcc600e_part_1_jquery.ui.map.full.min_1.js"></script> 
<script type="text/javascript" src="/app_dev.php/js/fcc600e_part_1_myscript_2.js"></script> 
<script> 
     $('#map_canvas').gmap().bind('init', function(ev, map) { 
     $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() { 
      $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this); 
     }); 
    }); 
</script>

當然

我已經在腳本調用之前放一個空的<div id="map_canvas"></div>在我的HTML。

該函數被執行，根本沒有控制檯錯誤。我在「#map_canvas」中看到了html，但地圖放置在視口之外的某個位置，朝向頂部，並且完全不可見。（似乎是內聯CSS告訴它絕對位置..）

這裏呈現的HTML：http://pastebin.com/V2cMt4Kr

下面是與我使用的代碼的實際活動鏈接： http://www.isawu.eu/index.html

來源

2013-02-13 George Katsanos

downvoter，請說明。 – 2013-02-16 08:52:56

我猜你沒有爲你的地圖容器放置任何CSS代碼。檢查我的例子：http://jsfiddle.net/Ywknf/12/

所有被定位CSS（在線與否）內的地圖是除了最後一個可見（＃map_canvas3）

 <div id="map_canvas"></div> 
     <div id="map_canvas1"></div> 
     <div id="map_canvas2" style="width:400px; height:300px;"></div> 
     <div id="map_canvas3"></div> <!--invisible -->

Καλήσυνέχειαστηνπροσπάθεια

來源

2013-02-13 13:34:30 Theodore

這裏有一個實時鏈接：http://www.isawu.eu/index.html – 2013-02-13 13:43:19

好吧，你需要設置一個高度來工作..誰會想到！ – 2013-02-13 13:46:51

謝謝你是最棒的！對其他人的FYI。 Google提供的默認代碼爲「height：100％;」。 – 2015-09-25 00:29:03

假設所有其他是正確的。你可以嘗試一下了谷歌地圖的容器（我相信它的iFrame）的主容器，你可以嘗試從外部樣式表應用下面的CSS樣式它：

#map_canvas > *{margin-top:-200px !important; display:block !important;}

注意：> *符號在這種情況下，將從#map_canvas中選擇所有孩子

這應該讓它顯示在您的頁面上。

來源

2013-02-13 13:35:46 AnchovyLegend

好吧，似乎在呈現的HTML中沒有iframe。。。 – 2013-02-13 13:42:07

請參閱編輯答案。 – AnchovyLegend 2013-02-13 13:44:00

看來你需要將高度屬性添加到容器中。 – 2013-02-13 13:47:27

這是不包括谷歌地圖API V3的有效方法：

<script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/10/22/main.js" type="text/javascript"></script>

您應該刪除線，該版本下面應該工作，但老：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

這是目前documented way of including the API

<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> 
</script>

來源

2013-02-13 13:46:34 geocodezip

我知道，我只是複製粘貼呈現的HTML並將其放在靜態HTML文件中..所以我可以在這裏展示它..因爲我在Symfony FW的本地開發 – 2013-02-13 13:48:15

將谷歌地圖嵌入到一個頁面中：雖然HTML中存在地圖，但不能看到

回答

相關問題