Отображение данных из геойсона с использованием информационных окон

Question

У меня проблема с отображением данных в информационных окнах слоя данных Карт Google.Здесь я использую Geojson для загрузки данных.кто-нибудь может мне помочь?

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

  map.data.loadGeoJson(
    'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_rivers_lake_centerlines.geojson');
  console.log( map.data);

 var ced = google.maps.event.addListener(map.data,'click',function(event) {       
    console.log(event.feature.f)
    alert("Koordinat:lat: "+event.latLng.lat()+", lng: "+event.latLng.lng());
    alert(JSON.stringify(event.feature.f));
  });
}

в этот момент я просто могу сделать данные apper по методу оповещения

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

Answer 1

Вам необходимо создать InfoWindow , добавить к нему свой контент, назначить ему позицию и вызвать на нем open:

var ced = google.maps.event.addListener(map.data, 'click', function(event) {
  console.log(event.feature.f)
  infowindow.setContent("Koordinat:lat: " + event.latLng.lat() + ", lng: " + event.latLng.lng() + "<br>" + JSON.stringify(event.feature.f));
  infowindow.setPosition(event.latLng);
  infowindow.open(map);
});

фрагмент кода подтверждения концепции:

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

<div id="map"></div>
<script>
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {
        lat: -2.9365327,
        lng: 104.4950964
      }
    });
    var infowindow = new google.maps.InfoWindow();
    map.data.loadGeoJson(
      'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_rivers_lake_centerlines.geojson');
    console.log(map.data);

    var ced = google.maps.event.addListener(map.data, 'click', function(event) {
      console.log(event.feature.f)
      infowindow.setContent("Koordinat:lat: " + event.latLng.lat() + ", lng: " + event.latLng.lng() + "<br>" + JSON.stringify(event.feature.f));
      infowindow.setPosition(event.latLng);
      infowindow.open(map);
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_API_KEY"></script>