I have a map which has multiple markers within close proximity of each other. Trying to integrate the marker clustering through google dev kit.
However the clustering is not occuring, and am also not getting an error in console - which makes it somewhat tricky.
Map data being used:
var places = [{
"id": 1,
"name": "Test",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9630
},
"description": "This is a test",
"is_active": true
},
{
"id": 2,
"name": "Test2",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9430
},
"description": "This is a test",
"is_active": true
},
{
"id": 3,
"name": "Test3",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9530
},
"description": "This is a test",
"is_active": true
},
{
"id": 4,
"name": "Test4",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9670
},
"description": "This is a test",
"is_active": true
}]
Javascript:
var GoogleMap = {
map: null,
markers: {},
init: function(lat, lng, places) {
var self = this;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(lat, lng)
};
this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
this.infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(50, 50)
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
var marker = new google.maps.Marker({
position: place.geometry.location
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
}(place));
}
this.map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(), 12));
});
$.each(places, function() {
self.addMarker(this);
});
this.setCenterPoint();
},
// Create map markers
addMarker: function(place) {
var self = this;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.coordinate.latitude, place.coordinate.longitude),
map: self.map,
title: place.name,
icon: place.image
});
console.log(place);
// Create information event for each marker
marker.info_window_content = 'TEST'
self.markers[place.id] = marker
google.maps.event.addListener(marker, 'click', function() {
self.infowindow.setContent(marker.info_window_content)
self.infowindow.open(self.map, marker);
});
// cluster the markers using google marker clusterer
var markerClusterer = new MarkerClusterer(this.map, self.marker, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
},
// Update map markers
updateMarkers: function(records) {
var self = this;
$.each(self.markers, function() {
this.setMap(null);
})
$.each(records, function() {
self.markers[this.id].setMap(self.map);
});
//Set map center
if (records.length) self.setCenterPoint();
},
// Set centre point for map
setCenterPoint: function() {
var lat = 0,
lng = 0;
count = 0;
//Calculate approximate center point based on number of JSON entries
for (id in this.markers) {
var m = this.markers[id];
if (m.map) {
lat += m.getPosition().lat();
lng += m.getPosition().lng();
count++;
}
}
if (count > 0) {
this.map.setCenter(new google.maps.LatLng(lat / count, lng / count));
}
}
};
// CHANGE MAP FOCUS:
function showCompany(lat, lng) {
var position = new google.maps.LatLng(lat, lng);
map.setCenter(position);
alert(lat, lng);
}
Which is displaying the map in html via the div ID 'map'.
I have created a JSFiddle to see the map markers being loaded in #map, but as you can see. The markers are loading, but not clustering.
In a desperate attempt to resolve, have also tried changing the default zoom level, as I thought this might be creating the issue.
Strange that no body reply you with the bounty.
Here is the clustered markers version based on yours:
https://jsfiddle.net/qakbnx6h/1/
The problem is in the addMarker(), for each place, you created a new MarkerClusterer so the clustering is not working.
To solve it:
MarkerClusterer on addMark()addMaker()addMarker: function(place) {
var self = this;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.coordinate.latitude, place.coordinate.longitude),
map: self.map,
title: place.name,
icon: place.image
});
console.log(place);
// Create information event for each marker
marker.info_window_content = 'TEST'
self.markers[place.id] = marker
google.maps.event.addListener(marker, 'click', function() {
self.infowindow.setContent(marker.info_window_content)
self.infowindow.open(self.map, marker);
});
// return marker;
return marker;
},
MarkerClusterer below $.each of places and use the array marker created on step 3// markers array to store place marker
const markers = []
$.each(places, function() {
// push new marker to array
markers.push( self.addMarker(this));
});
// use the markers in MarkerClusterer
const markerClusterer = new MarkerClusterer(this.map, markers, {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});