Infowindow in Google Maps does not load

Question

I am having trouble with displaying infowindow. I have checked the code a million times but I am not able to figure it out. I have pasted my code below. Please help me find the problem.

I get the markers on the map. When I Click on them I want a location Id to be displayed but it is not working.

I am using Google Chrome.

//Javascript function to load map
function initMap() {
  var myLatlng = new google.maps.LatLng(37.09024, -95.712891);
  var mapOptions = {
     zoom: 4,
     center: myLatlng,
     scrollwheel: false, 
 }

 var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);
 var infoWindow = new google.maps.InfoWindow;
 geojson_url = 'https://raw.githubusercontent.com/eyeshu98/dummy/master/geodata.json',
 map.data.loadGeoJson(geojson_url, null, loadMarkers)

 function loadMarkers() {

 map.data.forEach(function(feature) {

 // geojson format is [longitude, latitude] but google maps marker position attribute
 // expects [latitude, longitude]
 var latitude = feature.getGeometry().get().lat()
 var longitude = feature.getGeometry().get().lng()
 var titleText = feature.getProperty('Location ID')
 var infowincontent = document.createElement('div');
  var strong = document.createElement('strong');
  strong.textContent = titleText
  infowincontent.appendChild(strong);
  infowincontent.appendChild(document.createElement('br'));
 console.log(infowincontent);

 var marker = new google.maps.Marker({
   position: {lat: latitude, lng:longitude},
   map: map,
   clickable: true
  });
  marker.addListener('click', function() {
     infoWindow.close();
      infoWindow.setContent(infowincontent);
      infoWindow.open(map, marker);
    });

 });

}
}
google.maps.event.addDomListener(window, 'load', initMap);

Answer 1

You have two sets of markers, the ones loaded by loadGeoJson and the set of markers that you add later. The ones from the DataLayer are on top of the ones with the click listener, blocking the click.

Simplest fix, hid the markers from the DataLayer with:

map.data.setMap(null);

proof of concept fiddle

code snippet:

function initMap() {
  var myLatlng = new google.maps.LatLng(37.09024, -95.712891);
  var mapOptions = {
     zoom: 4,
     center: myLatlng,
     scrollwheel: false, 
 }

 var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);
 var infoWindow = new google.maps.InfoWindow;
 geojson_url = 'https://raw.githubusercontent.com/eyeshu98/dummy/master/geodata.json',
 map.data.loadGeoJson(geojson_url, null, loadMarkers);
 map.data.setMap(null); // hide the datalayer

 function loadMarkers() {

 map.data.forEach(function(feature) {

 // geojson format is [longitude, latitude] but google maps marker position attribute
 // expects [latitude, longitude]
 var latitude = feature.getGeometry().get().lat()
 var longitude = feature.getGeometry().get().lng()
 var titleText = feature.getProperty('Location ID')
 var infowincontent = document.createElement('div');
  var strong = document.createElement('strong');
  strong.textContent = titleText
  infowincontent.appendChild(strong);
  infowincontent.appendChild(document.createElement('br'));
 console.log(infowincontent);

 var marker = new google.maps.Marker({
   position: {lat: latitude, lng:longitude},
   map: map,
   clickable: true
  });
  marker.addListener('click', function() {
     infoWindow.close();
      infoWindow.setContent(infowincontent);
      infoWindow.open(map, marker);
    });

 });

}
}
google.maps.event.addDomListener(window, 'load', initMap);

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#regularMap {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="regularMap"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>