一页中有多个具有非顺序ID的googleMap

Question

我有这段代码可以在一个页面中创建多个Google地图。

我正在加载脚本并运行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]
        });
    }
}

一切都很好，但是在我的情况下，ID不是连续的，例如：

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

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

Answer 1

一种选择是给<div>的类，然后使用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]
        });
    }
}

proof of concept fiddle

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]
    });
  }
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#mapNorth {
  height: 49%;
  width: 100%;
  float: top;
  border: 1px solid black;
}

#mapSouth {
  height: 49%;
  width: 100%;
  border: 1px solid black;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapNorth" class="map"></div>
<div id="mapSouth" class="map"></div>