Несколько информационных окон для каждого геойсона на картах Google

Question

Пока у меня есть только 3 источника геойсона. возможно, в будущем будет более 3 источников, которые я буду использовать. в моем коде он может отображать только одно «информационное окно». я хочу спросить, как мне отображать информационные окна для каждого источника geojson?

var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: {lat: -2.9365327, lng: 104.4950964}
    });

    var infowindow = new google.maps.InfoWindow();

    var foo1 = new google.maps.Data({map: map});
    foo1.loadGeoJson('https://rawgit.com/johan/world.geo.json/master/countries.geo.json');

    var foo2 = new google.maps.Data({map: map});
    foo2.loadGeoJson('https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_rivers_lake_centerlines.geojson');

    var foo3 = new google.maps.Data({map: map});
    foo3.loadGeoJson('https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_geography_regions_points.geojson');

    foo1.setStyle({
      fillColor: 'green',
      strokeColor: 'green',
      strokeWeight: 1
    });

    foo2.setStyle({
      fillColor: 'blue',
      strokeColor: 'blue',
      strokeWeight: 1
    });


    foo3.setStyle({
      fillColor: 'green',
      strokeColor: 'red',
      strokeWeight: 1
    });

    $('#foo1').click(function(){
      foo1.setMap($(this).is(':checked') ? map : null);
    });

    $('#foo2').click(function(){
      foo2.setMap($(this).is(':checked') ? map : null);
    });
    $('#foo3').click(function(){
      foo3.setMap($(this).is(':checked') ? map : null);
    });

    $('#foo1,#foo2,#foo3').removeAttr('disabled');

    $('#all').click(function(){
      foo1.setMap($(this).is(':checked') ? map : null);
      foo2.setMap($(this).is(':checked') ? map : null);
      foo3.setMap($(this).is(':checked') ? map : null);
    });

    $(document).ready(function() {
      $('#all').click(function() {
        var checked = $(this).prop('checked');
        $('#checkboxes').find('input:checkbox').prop('checked', checked);
      });
    })

    var ced = google.maps.event.addListener(foo1, 'click', function(event) {
      var aab=event.feature.l.name;
      infowindow.setContent('<div class="col-md-12"><div class="row"><div class="col-md-12"><table class="table table-striped"><tr><th>ID</th><td>'+aab+'</td></tr><tr><th>Latitude</th><td>'+ event.latLng.lat()+'</td></tr><tr><th>Longitude</th><td>'+ event.latLng.lng()+'</td></tr></table></div></div><div class="row"><div class="col-md-12"><button type="button" class="btn btn-info col-md-12" data-toggle="modal" data-target="#myModal'+aab+'">Detail</button></div></div></div>');
      console.log(event.feature.l)
      infowindow.setPosition(event.latLng);
      infowindow.open(map);
    });

    foo1.data.addListener('mouseover', function (event) {
      foo1.data.revertStyle();
      foo1.data.overrideStyle(event.feature, {
        strokeColor: 'red',
        strokeWeight: 8,
        visibility: 'off'

      });   
    });

    foo1.data.addListener('mouseout', function (event) {
      foo1.data.revertStyle();
    });
  }

Как видите, у меня есть три разных источника.

и при нажатии только один источник успешно отображает информацию о Windows. на этом изображении работает только для 'var foo1'

Может кто-нибудь мне помочь?

Answer 1

Не включая весь ваш код, но вы должны быть в состоянии сделать что-то подобное:

var infowindow1 = new google.maps.InfoWindow();
var infowindow2 = new google.maps.InfoWindow();
var infowindow3 = new google.maps.InfoWindow();

А затем использовать их отдельно в слушателях событий:

google.maps.event.addListener(foo1, 'click', function(event) {

  infowindow1.setContent('xxx');
  infowindow1.setPosition(event.latLng);
  infowindow1.open(map);
});

google.maps.event.addListener(foo2, 'click', function(event) {

  infowindow2.setContent('xxx');
  infowindow2.setPosition(event.latLng);
  infowindow2.open(map);
});

google.maps.event.addListener(foo3, 'click', function(event) {

  infowindow3.setContent('xxx');
  infowindow3.setPosition(event.latLng);
  infowindow3.open(map);
});

Редактировать: Ваш вопрос теперь отличается от оригинала, вот как вы можете динамически загружать различные источники, устанавливать стили, события и т. Д., Чтобы вы могли добавить столько слоев и источников, сколько вы хочу. Код пример и показывает базовую идею. Используйте его и адаптируйте для всех ваших событий и других нужд.

Обратите внимание на использование замыкания на слушателе событий, когда вы используете его в цикле, и используйте тот же подход для любого другого события, которое вы хотите присоединить.

function initialize() {

  var myLatLng = new google.maps.LatLng(46.2, 6.17);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var sources = [
    {
      url: 'https://rawgit.com/johan/world.geo.json/master/countries.geo.json',
      fillColor: 'yellow',
      strokeColor: 'red'
    },
    {
      url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_rivers_lake_centerlines.geojson',
      fillColor: 'blue',
      strokeColor: 'green'
    },
    {
      url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_geography_regions_points.geojson',
      fillColor: 'pink',
      strokeColor: 'white'
    }
  ];

  for (var i = 0; i < sources.length; i++) {

    let d = new google.maps.Data({
      map: map
    });

    d.loadGeoJson(sources[i].url);

    d.setStyle({
      fillColor: sources[i].fillColor,
      strokeColor: sources[i].strokeColor,
      strokeWeight: 1
    });

    let iw = new google.maps.InfoWindow();

    google.maps.event.addListener(d, 'click', (function(d, i) {

      return function(event) {

        iw.setContent('Content for IW of source ' + i);
        iw.setPosition(event.latLng);
        iw.open(map);
      }

    })(d, i));
  }
}

initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>