javascript jquery google-maps infowindow

Google Maps Info Window calling from another API

I am trying to put info windows in for a Google Maps page. I am using an API to call data and also using the markerclusterer.js plugin. I've seen how to do it with with a JSON object or if the markers are within the JavaScript document but I don't understand how to apply it to calling from another API.

What am I doing wrong? Can you please explain?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>API Test</title>
    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<!--CSS-->
<link href="style.css" rel="stylesheet" type="text/css">
<!--JavaScript-->
<script src="script.js" type="text/javascript">
</script>
<script src="markerclusterer.js" type="text/javascript">
</script>
</head>
<body>
    <div class="container">
        <br>
        <div id="content">
            <br>
            <div id="googleMap"></div><br>
            <footer id="footer">
                <p>Footer</p>
            </footer>
        </div>
    </div>
</body>
</html>

CSS:

#content {
    box-shadow: 5px 5px 10px 5px black;
}

#googleMap {
    height: 400px;
    width: 100%;
    border: 1px solid black;
}

JavaScript:

var map;
var MarkerClusterer;
var marker;
var mcOptions;
var markers = [];
$(document).ready(function() {
    //Construct the query string
    url ='https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?';
    + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX';
    function initialize() {
            var mapProp = {
                center: new google.maps.LatLng(39.287346, -76.964306),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            map = new google.maps.Map(document.getElementById(
                "googleMap"), mapProp);
            var infowindow = new google.maps.InfoWindow({
                content: "Hello World!"
            });
            google.maps.event.addListener(markers, 'click', function() {
                console.log("hello world")
                infowindow.open(map, Markers);
            });
        }
        //google.maps.event.addDomListener(window, 'load', initialize);
    initialize();
    //Retrieve our data and plot it
    $.getJSON(url, function(data, textstatus) {
        $.each(data, function(i, entry) {
            //Cluster Markers
            for (var i = 0; i < 50; i++) {
                var entryMarkers = entry[i];
                var LatLng = new google.maps.LatLng(
                    parseFloat(entry.coordinates.latitude),
                    parseFloat(entry.coordinates.longitude)
                );
            }
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(
                    parseFloat(entry.coordinates
                        .latitude),
                    parseFloat(entry.coordinates
                        .longitude)),
                map: map,
                title: entry.file_name
            });
            markers.push(marker);
        });
        var markerCluster = new MarkerClusterer(map, markers);
    });
    //info windows
});

Solution

This is not valid:

google.maps.event.addListener(markers, 'click', function() {
    console.log("hello world")
    infowindow.open(map, Markers);
});

An event listener doesn't work on an array, needs to be added to each marker (that it applies to) individually.

You can use function closure to associate the infowindow to the marker (below example uses a createMarker function) and make the infowindow global. Note that you don't have to use function closure there are other ways to solve the issue. Below example puts the entry.file_name into the infowindow.

working fiddle

code snippet:

var map;
var MarkerClusterer;
var marker;
var mcOptions;
var markers = [];
var infowindow = new google.maps.InfoWindow({
  content: "Hello World!"
});
$(document).ready(function() {
  //Construct the query string
  url = 'https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?' + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX';

  function initialize() {
      var mapProp = {
        center: new google.maps.LatLng(39.287346, -76.964306),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      };
      map = new google.maps.Map(document.getElementById(
        "googleMap"), mapProp);
    }
    //google.maps.event.addDomListener(window, 'load', initialize);
  initialize();
  //Retrieve our data and plot it
  $.getJSON(url, function(data, textstatus) {
    $.each(data, function(i, entry) {
      createMarker(entry);
    });
    var markerCluster = new MarkerClusterer(map, markers);
  });
  //info windows
});

function createMarker(entry) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(
      parseFloat(entry.coordinates.latitude),
      parseFloat(entry.coordinates.longitude)),
    map: map,
    title: entry.file_name
  });
  markers.push(marker);
  google.maps.event.addListener(marker, 'click', function() {
    console.log("hello world");
    infowindow.setContent(entry.file_name + "<br>" + marker.getPosition().toUrlValue(6));
    infowindow.open(map, marker);
  });
}

#input-area {
  width: 100%;
  border: 1px solid black;
}
#googleMap {
  height: 400px;
  width: 100%;
}
html,
body {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<!-- was https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <br>
  <div id="content">
    <br>
    <div id="googleMap"></div>
    <br>
    <footer id="footer">
      <p>Footer</p>
    </footer>
  </div>
</div>