Карты Гугл. Несколько карт с несколькими маркерами с содержимым

У меня есть этот код для вызова нескольких карт на одной странице, он вызывает все, используя массивы, чтобы сделать код максимально коротким.

из вопроса: несколько googleMaps на одной странице с непоследовательными идентификаторами < /а>

var coords = [
    {lat: 53.647143, lng: -2.317803, zoom: 10},
    {lat: 53.259065, lng: -4.417487, zoom: 7}
];
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);

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

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

Этот код запускается с использованием обратного вызова после загрузки скрипта карт Google и работает очень хорошо, но отображает только один маркер на карте.

Мне нужно добавить несколько маркеров на каждую карту, я думал о том, чтобы включить координаты маркеров в массив «координаты»:

    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>"}
]}
];

Но я не уверен, как внедрить в код, чтобы он работал, есть идеи?

работающий код: https://jsfiddle.net/wfmztu8v/9/


google-maps javascript
person ysanmiguel    schedule 02.08.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Могут быть лучшие способы определения ваших данных. Но с существующим форматом это работает:

function initMap() {
  for (var i = 0, length = coords.length; i < length; i++) {
    // create the map
    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
    });
    // process the markers for the map
    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]
      });
      // open an infowindow when marker clicked
      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]));
    }
  }
}

обновлена ​​скрипта

скриншот полученной карты

фрагмент кода:

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>

person geocodezip    schedule 02.08.2018

arrow_upward
1
arrow_downward

Проблема в том, что ваш код помещает маркер0 на карту0 и маркер1 на карту1... вам нужно повторить второй раз для маркеров..

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();
person fvrab    schedule 02.08.2018
comment
Это нормально, но на обеих картах отображаются одни и те же маркеры, идея состоит в том, чтобы иметь разные маркеры на карте плюс координаты для центрирования карты, поэтому я подумал о включении координат в массив координат (см. исходный пост). Спасибо! - person ysanmiguel; 02.08.2018