Javascript 从外部js文件编辑现有google地图_Javascript_Google Maps_Google Maps Api 3

Javascript 从外部js文件编辑现有google地图

javascript google-maps google-maps-api-3

Javascript 从外部js文件编辑现有google地图,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我想从一个带有外部js文件的页面编辑所有google地图。假设我有5个页面，每个页面有3个谷歌地图。我想在每个谷歌地图上加一个圆圈。如何从将加载到每个页面的外部javascript文件中执行此操作？包含多个地图的基本页面和外部JS文件： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <sc

我想从一个带有外部js文件的页面编辑所有google地图。假设我有5个页面，每个页面有3个谷歌地图。我想在每个谷歌地图上加一个圆圈。

如何从将加载到每个页面的外部javascript文件中执行此操作？

包含多个地图的基本页面和外部JS文件：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var maps = [];
function drawMaps(){
    for(var i = 1; i<4;i++){
        drawMap(i);
    }
}
function drawMap(num){
    var mapcontainer=document.getElementById("map"+num);
    var options={
        center: new google.maps.LatLng(40.266323, -73.996579),
        zoom:8,
        maptypeid:google.maps.MapTypeId.ROADMAP 
    };
    var map=new google.maps.Map(mapcontainer,options);
    maps.push(map);
    var circle=new google.maps.Circle({
        map:map,
        center:new google.maps.LatLng(40.266323, -73.996579),
        radius:10000,
        fillColor:"blue",
        border:0,
        strokeWeight:0
    });
}

window.addEventListener("load", drawMaps); 
</script>
<script src="externalJS.js"></script>
</head>
<html>
<body>
    <div style="height:400px;width:400px" id="map1"></div> 
    <div style="height:400px;width:400px" id="map2"></div> 
    <div style="height:400px;width:400px" id="map3"></div>

</body>
</html>

注意它是如何引用maps数组并将红色圆圈应用于循环中的每个对象的。还要注意加载的窗口侦听器。通过使用此事件，我们可以按照定义事件的顺序添加多个事件，在本例中，按照加载脚本的顺序添加多个事件。

请将您得到的内容上载到JSFIDLE或其他。。。

function addToAllMaps(){
    if(maps!=undefined){
        for (var i in maps){
            var map = maps[i];
            var circle=new google.maps.Circle({
                    map:map,
                    center:new google.maps.LatLng(40.266323, -73.996579),
                    radius:1000000,
                    fillColor:"red",
                    border:0,
                    strokeWeight:0
                });
        }
    }
}
window.addEventListener("load", addToAllMaps);