Leif Greis
Leif Greis

Reputation: 69

Google Maps API - Marker Clustering not working

I'm presently working on a Google Map that will display many map markers, the data is in a series of arrays in an external JSON file. It is using Spiderfier as well for markers that overlap because they have the same coordinates. I'm trying to implement Marker clustering to make the map a little less cluttered when zoomed out, however clustering is not occurring. The console on the developer tools keeps logging "Uncaught TypeErrors" with the markerclusterer.js source code, claiming it cannot set properties or saying that something is not a function, but I'm not really sure what to do about that. Am I using the wrong source, is there another issue or is it both?

Code:

<script src= "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <script type="text/javascript" src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      var map 
        function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), {
          center: new google.maps.LatLng(40.8039941, -77.863459),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP});
        var oms = new OverlappingMarkerSpiderfier(map, { 
            markersWontMove: true, 
            markersWontHide: true,
            //basicFormatEvents: true
        });
        
        var selectedInfoWindow
       
        $(document).ready(function() {
        $.getJSON("crime_maps_test.json", function(json1) {
          $.each(json1, function(key, data) {
            var infoWindow = new google.maps.InfoWindow;
            var latLng = new google.maps.LatLng(data.lat, data.lng); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.location
            });
            marker.setMap(map);
        setTimeout(function (){marker.setMap(map);}, 1000); 
        google.maps.event.addListener(marker, 'spider_click', (function(marker, data) {
            return function() {
                var Date = data.Occurred;
                var Incident = data.Incident;
                var Location = data.location;
                var Reported = data.reported;
                var Offense = data.offenses;
                var Nature = data.nature_of_incident;
                var iwContent = "<div style = 'width:200px;min-height:40px'><h3>" + Location + "</h3>" + "<p>" + "Incident Number: " + Incident + "</p>" + "<p>" + "Date of Occurrence: "+ Date + "</p>" + "<p>"+ "Date Reported: " + Reported + "</p>" + "<p>" + "Offense(s): "+ Offense + "</p>"+ "<p>" + "Nature of Incident: "+ Nature + "</p>" + "</div>";
                //Inserting the div for the infowindow straight into the setContent parenthesis was not working so I created a variable to house it.
                infoWindow.setContent(iwContent);
                if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
            selectedInfoWindow.close();
            //If the clicked window is the selected window, deselect it and return
            if (selectedInfoWindow == infoWindow) {
                selectedInfoWindow = null;
                return;
            }
        }
        //If you arrive here, that means you should open the new info window 
        //because is different from the selected one
        selectedInfoWindow = infoWindow;
        selectedInfoWindow.open(map, marker);
            var markerCluster = new MarkerClusterer(map, marker,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
            }
            })(marker, data));
            oms.addMarker(marker);
          });
        });
      });
    window.map = map;
    window.oms = oms;

}
    </script>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=apiKey&callback=initialize"></script>

Data is stored in an external data file data:

[
    {
		"Incident": "PSU201701139",
		"Occurred": "3/25/17 23:25",
		"reported": "3/25/17 23:25",
		"nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
		"offenses": "Possession of Small Amount of Marijuana",
		"location": "Porter Hall",
		"disposition": "Open",
		"lat": 40.8008254,
		"lng": -77.8587917
	},
	{
		"Incident": "PSU201701136",
		"Occurred": "03/25/2017 9:25 PM to 9:30 PM",
		"reported": "3/25/17 21:31",
		"nature_of_incident": "Visitor observed highly intoxicated",
		"offenses": "Public Drunkenness",
		"location": "Bryce Jordan Center",
		"disposition": "Open",
		"lat": 40.8086228,
		"lng": -77.8642905
	},
	{
		"Incident": "PSU201701134",
		"Occurred": "03/25/2017 8:52 PM to 8:58 PM",
		"reported": "3/25/17 20:58",
		"nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
		"offenses": "Possession of Small Amount of Marijuana",
		"location": "Curtin Hall 5Th Floor",
		"disposition": "Open",
		"lat": 40.805098,
		"lng": -77.861208
	},
	{
		"Incident": "PSU201701133",
		"Occurred": "03/25/2017 8:43 PM to 8:47 PM",
		"reported": "3/25/17 20:47",
		"nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
		"offenses": "Possession of Small Amount of Marijuana",
		"location": "First Floor Tener Hall",
		"disposition": "Open",
		"lat": 40.8062507,
		"lng": -77.8659939
	},
	{
		"Incident": "PSU201701132",
		"Occurred": "03/23/2017 12:01 AM to 2:00 AM",
		"reported": "3/25/17 20:43",
		"nature_of_incident": "Student reported they were assaulted by a known person",
		"offenses": "Strangulation/Harassment/RFA-Request for Assistance",
		"location": "Patterson Hall",
		"disposition": "Open",
		"lat": 40.7900255,
		"lng": -77.8749025
	},
	{
		"Incident": "PSU201701130",
		"Occurred": "03/25/2017 8:38 PM to 8:55 PM",
		"reported": "3/25/17 20:41",
		"nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
		"offenses": "Possession of Small Amount of Marijuana",
		"location": "McKee Hall",
		"disposition": "Open",
		"lat": 40.7963782,
		"lng": -77.8701405
	},
	{
		"Incident": "PSU201701030",
		"Occurred": "03/19/2017 8:00 PM to 10:00 PM",
		"reported": "3/19/17 23:13",
		"nature_of_incident": "Student reported the theft of their unattended personal property",
		"offenses": "Theft/$50-$200/From Building",
		"location": "Hartranft Hall",
		"disposition": "Open",
		"lat": 40.8001538,
		"lng": -77.8600272
	},
	{
		"Incident": "PSU201701031",
		"Occurred": "03/15/2017 12:00 PM to 8:00 PM",
		"reported": "3/19/17 19:04",
		"nature_of_incident": "Employee reported the theft of unsecured personal property",
		"offenses": "Theft/Over $200/From Building",
		"location": "Redifer Cmns",
		"disposition": "Open",
		"lat": 40.7995177,
		"lng": -77.8581232
	},
	{
		"Incident": "PSU201701026",
		"Occurred": "03/18/2017 11:40 PM to 11:45 PM",
		"reported": "3/18/17 23:42",
		"nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
		"offenses": "Possession of Small Amount of Marijuana",
		"location": "Stone Hall",
		"disposition": "Open",
		"lat": 40.8070745,
		"lng": -77.8638751
	},
	{
		"Incident": "PSU201701022",
		"Occurred": "03/18/2017 8:00 PM to 8:20 PM",
		"reported": "3/18/17 20:23",
		"nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
		"offenses": "Possession of Small Amount of Marijuana",
		"location": "Pennypacker Hall - 4Th Floor",
		"disposition": "Open",
		"lat": 40.8061624,
		"lng": -77.8626794
	},
	{
		"Incident": "PSU201701018",
		"Occurred": "03/18/2017 2:00 PM to 2:08 PM",
		"reported": "3/18/17 14:08",
		"nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
		"offenses": "Possession of Small Amount of Marijuana",
		"location": "Pennypacker Hall",
		"disposition": "Open",
		"lat": 40.8061624,
		"lng": -77.8626794
	},
	{
		"Incident": "PSU201701015",
		"Occurred": "03/13/2017 3:31 PM to 03/18/2017 7:00 AM",
		"reported": "3/18/17 10:02",
		"nature_of_incident": "Employee reported accidental damage to University property",
		"offenses": "RFA-Request for Assistance",
		"location": "Hub Book Store",
		"disposition": "Closed",
		"lat": 40.7984565,
		"lng": -77.8610745
	},
	{
		"Incident": "PSU201701014",
		"Occurred": "3/18/17 9:15",
		"reported": "3/18/17 9:15",
		"nature_of_incident": "Visitor reported a two vehicle crash with no injuries",
		"offenses": "Vehicle Code - Accident",
		"location": "University Park Airport",
		"disposition": "Closed",
		"lat": 40.8517473,
		"lng": -77.8496788
	},
	{
		"Incident": "PSU201701013",
		"Occurred": "03/18/2017 3:41 AM to 4:05 AM",
		"reported": "3/18/17 3:45",
		"nature_of_incident": "Underage student observed highly intoxicated and transported to the hospital",
		"offenses": "Pur,Cons,Poss, Trans Intox Bev/Health and Safety/RFA-Request for Assistance",
		"location": "Mifflin Hall",
		"disposition": "Open",
		"lat": 40.800492,
		"lng": -77.8605983
	}
]

Upvotes: 0

Views: 2433

Answers (1)

geocodezip
geocodezip

Reputation: 161334

Your main problem with the MarkerCluster is you are creating a new one for each marker, you want to use it the same as OMS, add all the markers to the same one and let it manage them. You will also have an issue with loading the API with a callback, but not asynchronously, better, since you are using third party libraries that depend on the API to load everything synchronously (remove the callback and call initialize with an onload event handler..

proof of concept fiddle

screenshot of result

code snippet:

var map
var markers = [];

function initialize() {
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(40.8039941, -77.863459),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var oms = new OverlappingMarkerSpiderfier(map, {
    markersWontMove: true,
    markersWontHide: true,
    //basicFormatEvents: true
  });

  var selectedInfoWindow

  $(document).ready(function() {
    // $.getJSON("crime_maps_test.json", function(json1) {
    $.each(json1, function(key, data) {
      var infoWindow = new google.maps.InfoWindow;
      var latLng = new google.maps.LatLng(data.lat, data.lng);
      // Creating a marker and putting it on the map
      var marker = new google.maps.Marker({
        position: latLng,
        title: data.location
      });

      google.maps.event.addListener(marker, 'spider_click', (function(marker, data) {
        return function() {
          var Date = data.Occurred;
          var Incident = data.Incident;
          var Location = data.location;
          var Reported = data.reported;
          var Offense = data.offenses;
          var Nature = data.nature_of_incident;
          var iwContent = "<div style = 'width:200px;min-height:40px'><h3>" + Location + "</h3>" + "<p>" + "Incident Number: " + Incident + "</p>" + "<p>" + "Date of Occurrence: " + Date + "</p>" + "<p>" + "Date Reported: " + Reported + "</p>" + "<p>" + "Offense(s): " + Offense + "</p>" + "<p>" + "Nature of Incident: " + Nature + "</p>" + "</div>";
          //Inserting the div for the infowindow straight into the setContent parenthesis was not working so I created a variable to house it.
          infoWindow.setContent(iwContent);
          if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
            selectedInfoWindow.close();
            //If the clicked window is the selected window, deselect it and return
            if (selectedInfoWindow == infoWindow) {
              selectedInfoWindow = null;
              return;
            }
          }
          //If you arrive here, that means you should open the new info window 
          //because is different from the selected one
          selectedInfoWindow = infoWindow;
          selectedInfoWindow.open(map, marker);

        }
      })(marker, data));
      markers.push(marker);
      oms.addMarker(marker);
    });
    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
  });
  //  });
  window.map = map;
  window.oms = oms;
}
google.maps.event.addDomListener(window, "load", initialize);
var json1 = [{
  "Incident": "PSU201701139",
  "Occurred": "3/25/17 23:25",
  "reported": "3/25/17 23:25",
  "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
  "offenses": "Possession of Small Amount of Marijuana",
  "location": "Porter Hall",
  "disposition": "Open",
  "lat": 40.8008254,
  "lng": -77.8587917
}, {
  "Incident": "PSU201701136",
  "Occurred": "03/25/2017 9:25 PM to 9:30 PM",
  "reported": "3/25/17 21:31",
  "nature_of_incident": "Visitor observed highly intoxicated",
  "offenses": "Public Drunkenness",
  "location": "Bryce Jordan Center",
  "disposition": "Open",
  "lat": 40.8086228,
  "lng": -77.8642905
}, {
  "Incident": "PSU201701134",
  "Occurred": "03/25/2017 8:52 PM to 8:58 PM",
  "reported": "3/25/17 20:58",
  "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
  "offenses": "Possession of Small Amount of Marijuana",
  "location": "Curtin Hall 5Th Floor",
  "disposition": "Open",
  "lat": 40.805098,
  "lng": -77.861208
}, {
  "Incident": "PSU201701133",
  "Occurred": "03/25/2017 8:43 PM to 8:47 PM",
  "reported": "3/25/17 20:47",
  "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
  "offenses": "Possession of Small Amount of Marijuana",
  "location": "First Floor Tener Hall",
  "disposition": "Open",
  "lat": 40.8062507,
  "lng": -77.8659939
}, {
  "Incident": "PSU201701132",
  "Occurred": "03/23/2017 12:01 AM to 2:00 AM",
  "reported": "3/25/17 20:43",
  "nature_of_incident": "Student reported they were assaulted by a known person",
  "offenses": "Strangulation/Harassment/RFA-Request for Assistance",
  "location": "Patterson Hall",
  "disposition": "Open",
  "lat": 40.7900255,
  "lng": -77.8749025
}, {
  "Incident": "PSU201701130",
  "Occurred": "03/25/2017 8:38 PM to 8:55 PM",
  "reported": "3/25/17 20:41",
  "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
  "offenses": "Possession of Small Amount of Marijuana",
  "location": "McKee Hall",
  "disposition": "Open",
  "lat": 40.7963782,
  "lng": -77.8701405
}, {
  "Incident": "PSU201701030",
  "Occurred": "03/19/2017 8:00 PM to 10:00 PM",
  "reported": "3/19/17 23:13",
  "nature_of_incident": "Student reported the theft of their unattended personal property",
  "offenses": "Theft/$50-$200/From Building",
  "location": "Hartranft Hall",
  "disposition": "Open",
  "lat": 40.8001538,
  "lng": -77.8600272
}, {
  "Incident": "PSU201701031",
  "Occurred": "03/15/2017 12:00 PM to 8:00 PM",
  "reported": "3/19/17 19:04",
  "nature_of_incident": "Employee reported the theft of unsecured personal property",
  "offenses": "Theft/Over $200/From Building",
  "location": "Redifer Cmns",
  "disposition": "Open",
  "lat": 40.7995177,
  "lng": -77.8581232
}, {
  "Incident": "PSU201701026",
  "Occurred": "03/18/2017 11:40 PM to 11:45 PM",
  "reported": "3/18/17 23:42",
  "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
  "offenses": "Possession of Small Amount of Marijuana",
  "location": "Stone Hall",
  "disposition": "Open",
  "lat": 40.8070745,
  "lng": -77.8638751
}, {
  "Incident": "PSU201701022",
  "Occurred": "03/18/2017 8:00 PM to 8:20 PM",
  "reported": "3/18/17 20:23",
  "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
  "offenses": "Possession of Small Amount of Marijuana",
  "location": "Pennypacker Hall - 4Th Floor",
  "disposition": "Open",
  "lat": 40.8061624,
  "lng": -77.8626794
}, {
  "Incident": "PSU201701018",
  "Occurred": "03/18/2017 2:00 PM to 2:08 PM",
  "reported": "3/18/17 14:08",
  "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
  "offenses": "Possession of Small Amount of Marijuana",
  "location": "Pennypacker Hall",
  "disposition": "Open",
  "lat": 40.8061624,
  "lng": -77.8626794
}, {
  "Incident": "PSU201701015",
  "Occurred": "03/13/2017 3:31 PM to 03/18/2017 7:00 AM",
  "reported": "3/18/17 10:02",
  "nature_of_incident": "Employee reported accidental damage to University property",
  "offenses": "RFA-Request for Assistance",
  "location": "Hub Book Store",
  "disposition": "Closed",
  "lat": 40.7984565,
  "lng": -77.8610745
}, {
  "Incident": "PSU201701014",
  "Occurred": "3/18/17 9:15",
  "reported": "3/18/17 9:15",
  "nature_of_incident": "Visitor reported a two vehicle crash with no injuries",
  "offenses": "Vehicle Code - Accident",
  "location": "University Park Airport",
  "disposition": "Closed",
  "lat": 40.8517473,
  "lng": -77.8496788
}, {
  "Incident": "PSU201701013",
  "Occurred": "03/18/2017 3:41 AM to 4:05 AM",
  "reported": "3/18/17 3:45",
  "nature_of_incident": "Underage student observed highly intoxicated and transported to the hospital",
  "offenses": "Pur,Cons,Poss, Trans Intox Bev/Health and Safety/RFA-Request for Assistance",
  "location": "Mifflin Hall",
  "disposition": "Open",
  "lat": 40.800492,
  "lng": -77.8605983
}];
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript" src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<div id="map_canvas"></div>

Upvotes: 1

Related Questions