如何使用javascript從外部html頁面加載div？

Question

我在一個稱為map的div中有一個帶有google maps的html頁面。

  var map = new google.maps.Map(document.getElementById('map'),mapOptions);

現在，我想在多個網頁中使用相同的Google地圖。 如何在其他頁面中引用此div。

例如

我有另一個這樣的HTML文件

<html><head></head>
<body><div><!--How do I get the map here--></div>
</body></html>

使用Jquery可以嗎？

- -編輯 - -

所以我有一個名為myscript.js的腳本，其中有一個

jQuery(document).ready(function(){

依次有一個

var map = new google.maps.Map(document.getElementById('map'),mapOptions);

那么，如何在其他任何地方加載此腳本？

Answer 1

您不會引用此div。 加載頁面時，動態生成地圖。

如果您考慮使用$('#element').load('map.html #map) -它會從加載的內容中$('#element').load('map.html #map)所有腳本，因此生成腳本將無法運行。

由於應該是同一張地圖，請嘗試使用jQuery.getScript（）？

// gmaps.js
function generateMap() {
   //your custom logic
}

// html file
<html><head></head>
<body><div id="gmap"></div>
<script>
$.getScript('gmaps.js', function() {
    // Call custom function defined in script
    generateMap();
});

</script>
</body></html>

您可能還會在此處查看有關使用jQuery.getScript()和google maps的stackoverflow的示例：

編輯 -更新示例

// map.js
function generateMap()
{
    map = new GMap2(document.getElementById("div_map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    var latLong = new GLatLng(parseFloat(52.2322549), parseFloat(21.0387957));
    var marker = new GMarker(latLong, {draggable : false});
    map.addOverlay(marker);
    map.setCenter(latLong, 15);
}


// map.html - ! CHANGE API KEY !
<html>
    <head>
        <title>Google Map sample</title>
        <script type="text/javascript" src="js/jquery-1.7.1-min.js"></script>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=PUT_YOUR_KEY_HERE&sensor=false" type="text/javascript"></script>
    </head>
<body>
<div id="div_map" style="width:500px;height:400px;background-color:red;"></div>
<script type="text/javascript">
$.getScript('map.js', function() {
    generateMap();
});
</script>
</body>
</html>

Answer 2

假設您不打算在其他頁面上實際復制地圖實例本身，建議您創建一個獨立的頁面，然后通過<iframe>進行引用。 您可以嘗試通過jQuery，但地圖可能會損壞。

如何使用javascript從外部html頁面加載div？

問題描述

2 個解決方案

解決方案1
1 已采納 2012-01-10 18:33:27

解決方案2
0 2012-01-10 18:35:36

如何使用javascript從外部html頁面加載div？

問題描述

2 個解決方案

解決方案1 1 已采納 2012-01-10 18:33:27

解決方案2 0 2012-01-10 18:35:36

解決方案1
1 已采納 2012-01-10 18:33:27

解決方案2
0 2012-01-10 18:35:36