Javascript 如何在外部文件中存储google地图选项_Javascript_Google Maps

Javascript 如何在外部文件中存储google地图选项

javascript google-maps

Javascript 如何在外部文件中存储google地图选项,javascript,google-maps,Javascript,Google Maps,我正在使用Google Maps API v3，我希望将地图选项存储在外部JS文件中，并与包含Google地图的其他页面共享地图选项。假设有两个不同的页面，它们有自己的谷歌地图，指向不同的位置，通过设置一些控制选项，您希望这些地图具有相同的外观和感觉我尝试的是：在a.html中 <!DOCTYPE html> <html> <head> <style> #map {width: 500px; height: 500px;

我正在使用Google Maps API v3，我希望将地图选项存储在外部JS文件中，并与包含Google地图的其他页面共享地图选项。假设有两个不同的页面，它们有自己的谷歌地图，指向不同的位置，通过设置一些控制选项，您希望这些地图具有相同的外观和感觉

我尝试的是：

在

a.html中

<!DOCTYPE html>
<html>
<head>
    <style>
        #map {width: 500px; height: 500px;}
    </style>
</head>
<body>
<div id="map"></div>
<script src="map-options.js"></script>
<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), MY_MAP_OPTIONS);
        map.setCenter({lat: 40.782821, lng: -73.965596}); //New York
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>

显然，这些代码不起作用。问题是

position:google.maps.ControlPosition.RIGHT_TOP

在

map options.js

中；浏览器不知道这是什么，因为在加载

map options.js

时，谷歌地图库还没有加载

有解决这个问题的办法吗？或者，是否有其他方法与其他页面共享地图选项，以避免在许多页面中编写相同的代码？

您可以尝试更改加载脚本的顺序，并在加载body时调用initMap函数，而不是在加载google地图库时

这样，在调用initMap（）之前，将加载google地图库和外部js

<!DOCTYPE html>
<html>
<head>
    <style>
        #map {width: 500px; height: 500px;}
    </style>
</head>
<body onload="initMap()">
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
<script src="map-options.js"></script>
<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), MY_MAP_OPTIONS);
        map.setCenter({lat: 40.782821, lng: -73.965596}); //New York
    }
</script>
</script>
</body>
</html>


#地图{宽度：500px；高度：500px；}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'），MY\u map\u选项）；
map.setCenter（{lat:40.782821，lng:-73.965596}）；//纽约
}

尝试为不同的页面使用一个地图，或为不同的页面使用不同的地图？

<!DOCTYPE html>
<html>
<head>
    <style>
        #map {width: 500px; height: 500px;}
    </style>
</head>
<body onload="initMap()">
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
<script src="map-options.js"></script>
<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), MY_MAP_OPTIONS);
        map.setCenter({lat: 40.782821, lng: -73.965596}); //New York
    }
</script>
</script>
</body>
</html>