Question

我在其中一个名为map的div中有一个带有谷歌地图的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) - 它会从加载的内容中划分所有脚本，因此无法生成生成脚本。

因为它应该是相同的地图，请尝试使用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地图的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 个答案: