Display data from geojson using info windows

Question

I have a problem for displaying data to info windows on the Google Maps Data layer. Here I use Geojson to load data. can anyone help me?

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

at this moment im just can make data apper on alert method

and i want to make the data show from info windows when that street was clicked

Answer 1

You need to create an InfoWindow , add your content to it, give it a position and call open on it:

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

proof of concept code snippet:

 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>