javascript jquery api google-maps-api-3 markerclusterer

Trouble connecting API to Marker Clusterer and Google Maps API

I have been reading through the simple example that comes with markerclusterer.js and some other questions here on Stack Overflow but I am not sure what I am doing wrong.

The other examples I see use json or the markers built right into the HTML page but I am calling my data from another API. When I go to try to modify my page to incorporate the markers and the other API, I usually end up breaking my page.

As of right now, I don't have any errors in the console but obviously something is not working correctly.

What am I doing wrong? Thank you for your help!

HTML:

<body>
<div class="container">
    <div id="content">
        <br>
            <div id="googleMap"></div>
        <br>
        <footer id="footer">
            <p>Footer</p>
        </footer>
    </div>
</div>

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.003888,-77.105367),
        zoom:5,
        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) {

        //Cluster Markers
          var markers = [];
          for (var i = 0; i < 100; 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);
    });

});

Solution

You need to put all your markers in a single array. Right now you are clearing the markers array before creating each marker. Move the var markers = []; outside of the $.each.

//Retrieve our data and plot it
$.getJSON(url, function (data, textstatus) {
    //Cluster Markers
    var markers = [];
    $.each(data, function (i, entry) {


        for (var i = 0; i < 100; 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);
});

proof of concept fiddle

code snippet:

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.23888, -77.105367),
        zoom: 10,
        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) {
    //Cluster Markers
    var markers = [];
    $.each(data, function(i, entry) {


      for (var i = 0; i < 100; 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);
  });

});

#content {
  box-shadow: 5px 5px 10px 5px black;
}
#googleMap {
  height: 400px;
  width: 100%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div class="container">
  <div id="content">
    <br>
    <div id="googleMap"></div>
    <br>
    <footer id="footer">
      <p>Footer</p>
    </footer>
  </div>
</div>