谷歌地图。包含多个内容标记的多个地图

可能有更好的方法来定义数据。但对于现有格式,这是可行的:

函数initmap()。{
对于(var i=0,length=coords.length;i<length;i++){
//创建地图
var点=坐标[i];
var lat lng=新的google.maps.latlng(point.lat,point.lng);
maps[i]=新的google.maps.map(document.getElementsByClassName('map')[i],{
缩放:point.zoom,
中心:latlng
(});
//处理地图的标记
对于(var j=0;j<coords[i].marks.length;j++){
如果(!)标记[I])标记[I]=[]
如果(!)infowindow[i])infowindow[i]=new google.maps.infowindow();
markers[i][j]=新的google.maps.marker({
职位:{
lat:coords[i].marks[j].mlat,,
液化天然气:协调[I].标记[J].液化天然气
}
地图:地图[I]
(});
//单击标记时打开信息窗口
google.maps.event.addListener(markers[i][j],'单击',(函数(map,content,infowindow))。{
返回函数(e){
infowindow.setcontent(内容);
打开(地图,这个);
}
})(maps[i],coords[i].marks[j].mcont,infowindow[i]);
}
}
}
updated fiddle



代码段:




var coords=[{
纬度:53.647143,
液化天然气:
变焦:10,
标记:【{
MLAT:53.647143,
最低要求:-2.317803,
mcont:“<p>AAA</p>”
}
{
MLAT:53.576524,
主起落架:-2.429149,
mcont:“<p>bbb</p>”
}
]
}
{
纬度:53.259065,
液化天然气:
变焦:7,
标记:【{
MLAT:53.259065,
最低要求:-4.417487,
mcont:“<p>CCC</p>”
}
{
MLAT:53.412303,
主起落架:-3.004262,
mcont:“<p>ddd</p>”
}
{
MLAT:54.234574,
最低要求:-4.548636,
mcont:“<p>eee</p>”
}
]
}
;
变量标记=[]
var映射=[];
var信息窗口=[];

函数initmap()。{
对于(var i=0,length=coords.length;i<length;i++){
var点=坐标[i];
var lat lng=新的google.maps.latlng(point.lat,point.lng);

maps[i]=新的google.maps.map(document.getElementsByClassName('map')[i],{
缩放:point.zoom,
中心:latlng
(});
对于(var j=0;j<coords[i].marks.length;j++){
如果(!)标记[I])标记[I]=[]
如果(!)infowindow[i])infowindow[i]=new google.maps.infowindow();
markers[i][j]=新的google.maps.marker({
职位:{
lat:coords[i].marks[j].mlat,,
液化天然气:协调[I].标记[J].液化天然气
}
地图:地图[I]
(});
google.maps.event.addListener(markers[i][j],'单击',(函数(map,content,infowindow))。{
返回函数(e){
infowindow.setcontent(内容);
打开(地图,这个);
}
})(maps[i],coords[i].marks[j].mcont,infowindow[i]);
}
}
}
initmap();
html,
身体{
高度:100%;
宽度:100%;
利润:0倍;
填充:0px
}

#马普诺斯{
高度:49%;
宽度:98%;
浮球:顶部;
边框:1倍纯黑;
}

#马普南{
高度:49%;
宽度:98%;
边框:1倍纯黑;
}
<script src=“https://maps.googleapis.com/maps/api/js”></script>
<div id=“mapnorth”class=“map”></div>
<div id=“mapsouth”class=“map”></div>>pre>





updated fiddle



代码段:



var coords = [{
    lat: 53.647143,
    lng: -2.317803,
    zoom: 10,
    marks: [{
        mlat: 53.647143,
        mlng: -2.317803,
        mCont: "<p>aaa</p>"
      },
      {
        mlat: 53.576524,
        mlng: -2.429149,
        mCont: "<p>bbb</p>"
      }
    ]
  },
  {
    lat: 53.259065,
    lng: -4.417487,
    zoom: 7,
    marks: [{
        mlat: 53.259065,
        mlng: -4.417487,
        mCont: "<p>ccc</p>"
      },
      {
        mlat: 53.412303,
        mlng: -3.004262,
        mCont: "<p>ddd</p>"
      },
      {
        mlat: 54.234574,
        mlng: -4.548636,
        mCont: "<p>eee</p>"
      }
    ]
  }
];
var markers = [];
var maps = [];
var infowindow = [];

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);

    maps[i] = new google.maps.Map(document.getElementsByClassName('map')[i], {
      zoom: point.zoom,
      center: latlng
    });
    for (var j = 0; j < coords[i].marks.length; j++) {
      if (!markers[i]) markers[i] = [];
      if (!infowindow[i]) infowindow[i] = new google.maps.InfoWindow();
      markers[i][j] = new google.maps.Marker({
        position: {
          lat: coords[i].marks[j].mlat,
          lng: coords[i].marks[j].mlng
        },
        map: maps[i]
      });
      google.maps.event.addListener(markers[i][j], 'click', (function(map, content, infowindow) {
        return function(e) {
          infowindow.setContent(content);
          infowindow.open(map, this);
        }
      })(maps[i], coords[i].marks[j].mCont, infowindow[i]));
    }
  }
}
initMap();
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

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

#mapSouth {
  height: 49%;
  width: 98%;
  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>

问题是您的代码将marker0放在map0上,marker1放在map1上…你必须第二次迭代标记。

var coords = [
    [{lat: 53.647143, lng: -2.317803, zoom: 10, marks: [ 
        {mlat: 53.647143, mlng: -2.317803, mCont: "<p>aaa</p>"},
        {mlat: 53.576524, mlng: -2.429149, mCont: "<p>bbb</p>"}
        ]
        }],
    [{lat: 53.259065, lng: -4.417487, zoom: 7, marks: [
        {mlat: 53.259065, mlng: -4.417487, mCont: "<p>ccc</p>"},
        {mlat: 53.412303, mlng: -3.004262, mCont: "<p>ddd</p>"},
        {mlat: 54.234574, mlng: -4.548636, mCont: "<p>eee</p>"}
      ]
    }]
];

var markers = [];
var maps = [];
var dot = [];
var dots = [];

function initMap() {

  /* This will add all markers of coords[i] to maps[i] */

  function placeMarkersOnMap(i) {
    for (var x = 0, length1 = coords[i][0].marks.length; x < length1; x++) {
      dots[x] = coords[i][0].marks[x];
      dot[x] = new google.maps.LatLng(dots[x].mlat, dots[x].mlng);

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

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

    maps[i] = new google.maps.Map(document.getElementsByClassName('map')[i], {
      zoom: point[0].zoom,
      center: latlng
    });

    placeMarkersOnMap(i);
  }
}
initMap();