google map api InfoWindows

Question

I am trying to learn from a simple google developers tutorial in import GeoJSON data from either a local or remote source, and display it on my map. I have code and this code for USGS earth quake data JSON:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var text = ''+results.features[i].properties.place+'';
          var latLng = new google.maps.LatLng(coords[1],coords[0]);

          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }

        var infowindow = new google.maps.InfoWindow({
    content: text
    });

     marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=xxxx&callback=initMap">
    </script>
  </body>
</html>

The code working fine without problem. But I am having some problems with InfoWindows when clicked on marker's should open and hold some information. I try to configure it but it doesn't work. When clicked no opening on the marker's click event that I attached example like place name for that earth quake.

JSON response for earth quake:

{
  "type": "FeatureCollection",
  "metadata": {
    "generated": 1545674780000,
    "url": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp",
    "title": "USGS Magnitude 2.5+ Earthquakes, Past Week",
    "status": 200,
    "api": "1.7.0",
    "count": 326
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "mag": 2.6,
        "place": "14km WNW of Big Lake, Alaska",
        "time": 1545672051177,
        "updated": 1545672768461,
        "tz": -540,
        "url": "https://earthquake.usgs.gov/earthquakes/eventpage/ak20539699",
        "detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak20539699.geojsonp",
        "felt": null,
        "cdi": null,
        "mmi": null,
        "alert": null,
        "status": "automatic",
        "tsunami": 0,
        "sig": 104,
        "net": "ak",
        "code": "20539699",
        "ids": ",ak20539699,",
        "sources": ",ak,",
        "types": ",geoserve,origin,",
        "nst": null,
        "dmin": null,
        "rms": 0.82,
        "gap": null,
        "magType": "ml",
        "type": "earthquake",
        "title": "M 2.6 - 14km WNW of Big Lake, Alaska"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -150.2,
          61.5832,
          17.5
        ]
      },
      "id": "ak20539699"
    }
  ]
}

score 1 · Accepted Answer · answered Dec 24 '18 at 19:22

Related question: Google Maps JS API v3 - Simple Multiple Marker Example

Your "click" event listener needs to be inside the loop so it can be associated with each marker, and the content needs to be associated with the marker (the option used for that in the related question is function closure):

infowindow = new google.maps.InfoWindow();
for (var i = 0; i < results.features.length; i++) {
  var coords = results.features[i].geometry.coordinates;
  var text = '' + results.features[i].properties.place + '';
  var latLng = new google.maps.LatLng(coords[1], coords[0]);

  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });

  marker.addListener('click', (function(marker, text) {
    return function(e) {
      infowindow.setContent(text);
      infowindow.open(map, marker);
    }
  })(marker, text));
}

proof of concept fiddle

code snippet:

var map, infowindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: 'terrain'
  });
  infowindow = new google.maps.InfoWindow();
  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var text = '' + results.features[i].properties.place + '';
    var latLng = new google.maps.LatLng(coords[1], coords[0]);

    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });

    marker.addListener('click', (function(marker, text) {
      return function(e) {
        infowindow.setContent(text);
        infowindow.open(map, marker);
      }
    })(marker, text));
  }
}

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

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

google map api InfoWindows

1 Answers1