Currently, I am trying to incorporate the Overlapping Marker Spiderfier add-on into my Google Map configuration. The location data is retrieved from MongoDB and passed to a Jade Template.
Prior to implementing the add-on, I utilized a for loop to generate markers from an array of coordinates, which displayed correctly on the map.
However, after integrating the Spiderfier code, the markers are no longer being added to the map. Even though the map is still visible, the JavaScript console is showing an error message:
Uncaught Reference Error - OverlappingMarkerSpiderfier is not defined- Reviewing existing examples of the add-on
- Comparing my code to other solutions on Stack Overflow
Below is the code related to the Google Map:
script(src="http://maps.googleapis.com/maps/api/js?key=AIzaSyASXfB-y1pwF_S-qToDhYL7doiHrUFOx0Q&sensor=false")
script(src"http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js")
script.
var locationArray = [];
each tweetlocations, i in locationlist
script.
var latitude = "#{tweetlocations.latitude}";
var longitude = "#{tweetlocations.longitude}";
var markerlocation = new google.maps.LatLng(latitude,longitude);
locationArray.push(markerlocation);
<script>.
function initialize()
{
var mapProp = {
center:markerlocation,
zoom:1,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var iw = new google.maps.InfoWindow();
var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true});
var usualColor = 'eebb22';
var spiderfiedColor = 'ffee22';
var iconWithColor = function(color) {
return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' + color + '|000000|ffff00';
}
var shadow = new google.maps.MarkerImage('https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
new google.maps.Size(37, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34)
);
oms.addListener('click', function(marker, event) {
iw.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
iw.close();
});
oms.addListener('unspiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(usualColor));
markers[i].setShadow(shadow);
}
});
var bounds = new google.maps.LatLngBounds();
var coord;
for (coord in locationArray) {
bounds.extend(coord);
var marker = new google.maps.Marker({
position: locationArray[coord],
map: map,
icon: iconWithColor(usualColor),
shadow: shadow
});
oms.addMarker(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);