Javascript 一个页面中有多个Google地图，ID不连续'；s

我有这个代码来创建多个谷歌地图到一个页面

我正在加载脚本并运行initMap（）作为回调。 它工作得非常好，但仅当包含映射的div具有顺序ID时，例如在本例中：

<div id="mapSection1"></div>
<div id="mapSection2"></div>

JS代码：

var coords = [
    {lat: 49.18589, lng: -2.19917, zoom: 10},
    {lat: 101.1986, lng: -50.2445, zoom: 12}
];
var markers = [];
var maps = [];

function initMap() {
    for(var i = 0, length = coords.length; i < length; i++)
    {
        var point = coords[i];
        var latlng = new google.maps.LatLng(point.lat, point.lng);

        /**********Div's are called in this line*********/
        maps[i] = new google.maps.Map(document.getElementById('mapSection' + (i + 1)), {
            zoom: point.zoom,
            center: latlng
        });

        markers[i] = new google.maps.Marker({
            position: latlng,
            map: maps[i]
        });
    }
}

var-coords=[
{lat:49.18589，lng:-2.19917，zoom:10}，
{lat:101.1986，lng:-50.2445，zoom:12}
];
var标记=[]；
var映射=[]；
函数initMap（）{
for（变量i=0，长度=coords.length；i

一切正常，但就我而言，ID不是连续的，例如：

<div id="mapNort"></div>
<div id="mapSouth"></div>

---

问题是，如何将此ID包含到编写代码以显示地图的循环中？

一个选项是为

的类指定一个类，然后使用

getElementsByClassName

获取对它们的引用（顺便说一句，

lat:101.1986

不是有效纬度）

var coords = [
    {lat: 49.18589, lng: -2.19917, zoom: 10},
    {lat: 51.1986, lng: -50.2445, zoom: 12}
];
var markers = [];
var maps = [];

function initMap() {
    for(var i = 0, length = coords.length; i < length; i++)
    {
        var point = coords[i];
        var latlng = new google.maps.LatLng(point.lat, point.lng);

        /**********Div's are called in this line*********/
        maps[i] = new google.maps.Map(document.getElementsByClassName('map')[i], {
            zoom: point.zoom,
            center: latlng
        });

        markers[i] = new google.maps.Marker({
            position: latlng,
            map: maps[i]
        });
    }
}