I am attempting to implement the overlapping marker spidifier feature in my code. I followed the instructions provided in this link: functioning code of oms
However, upon creating the OverlappingMarkerSpiderfier object, I encounter the error: Uncaught TypeError: Cannot read property '__e3_' of undefined. The line causing this error is:
oms = new OverlappingMarkerSpiderfier(map);
I am combining the example code from the linked source with my existing code but seem to be stuck on this error.
The segment of code I modified can be found between //----spyderfy---->> and everything else remains unchanged:
'use strict'
window.onload = function() {
var map;
var oms;
if ("geolocation" in navigator){
navigator.geolocation.getCurrentPosition(onLocation, onError);
}
function onLocation(position){
var myPosition = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
createMap(myPosition);
setupAutocomplete();
}
//----------------------------------spyderfy-------------------------------->>
debugger;
oms = new OverlappingMarkerSpiderfier(map);
// listeners need to be registered only once
oms.addListener('click', function(marker, event) {
infowindow.setContent(marker.description);
infowindow.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);
}
infowindow.close();
});
oms.addListener('unspiderfy', function(markers) {
for(var i = 0; i < markers.length; i++) {
// markers[i].setIcon(iconWithColor(usualColor));
// markers[i].setShadow(shadow);
}
});
function handleSucess(data){
data.forEach(function(position_hash) {
handleItem(position_hash);
});
};
function handleItem(position_hash){
debugger;
//Info window content
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+position_hash.title+'</h1>'+
'<div id="bodyContent">'+
'<p>'+position_hash.description+'</p>'+
'<p>'+ position_hash.date +'</p>'+
'<p>'+ position_hash.formatted_addres +'</p>'
'</div>'+
'</div>';
var img = 'http://www.google.com/mapfiles/marker.png';
var myLatLng = new google.maps.LatLng(position_hash.latitude, position_hash.longitude);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: "https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Inside-Azure.png"
});
// to be possible in "click" show specific content
marker.description = contentString;
oms.addMarker(marker);
};
//---------------------------------------spyderfy----------------------------->>
function onError(err){
console.log("What browser are you using? IE 7??", err);
}
function createMap(position){
map = new google.maps.Map($('#map')[0], {
center: position,
zoom: 15,
});
yourPosition(position);
$( document ).ready(function() {
$.ajax({
url:"http://localhost:3000/events.json",
dataType: "json",
success: handleSucess,
error: handleError
});
});
}
function yourPosition(position){
var marker = new google.maps.Marker({
position: position,
animation: google.maps.Animation.DROP,
map: map,
icon: {
url: 'assets/your_pos.png',
scaledSize: new google.maps.Size(60, 60), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
},
title: "You are here",
});
};
function createMarker(position, position_hash) {};
function handleError(jqXHR, status, errorThrown){
alert("Something bad happened: "
+ status + ', ' + errorThrown);
}
};
I have included a snippet below to simplify the identification of the error:
'use strict'
window.onload = function() {
var map;
var oms;
//----------------------------------start-spyderfy-------------------------------->>
oms = new OverlappingMarkerSpiderfier(map);
// listeners need to be registered only once
oms.addListener('click', function(marker, event) {
infowindow.setContent(marker.description);
infowindow.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);
}
infowindow.close();
});
oms.addListener('unspiderfy', function(markers) {
for (var i = 0; i < markers.length; i++) {
// markers[i].setIcon(iconWithColor(usualColor));
// markers[i].setShadow(shadow);
}
});
function handleSucess(data) {
data.forEach(function(position_hash) {
handleItem(position_hash);
});
};
function handleItem(position_hash) {
//Info window content
var contentString = position_hash.title;
var img = 'http://www.google.com/mapfiles/marker.png';
var myLatLng = new google.maps.LatLng(position_hash.latitude, position_hash.longitude);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: "https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Inside-Azure.png"
});
// to be possible in "click" show specific content
marker.description = contentString;
oms.addMarker(marker);
};
//---------------------------------------end-spyderfy----------------------------->>
function createMap(position) {
map = new google.maps.Map($('#map')[0], {
center: {
lat: 41.4064557,
lng: 2.1920477
},
zoom: 15,
});
function onError(err) {
console.log("What browser are you using? IE 7??", err);
}
$(document).ready(function() {
data=[{
"id": 26,
"title": "Fancy event",
"latitude": 41.4064557,
"longitude": 2.1920477
},
{
"id": 27,
"title": "betaBeers",
"latitude": 41.391829,
"longitude": 2.177191,
}]
handleSucess(data);
});
}
function handleError(jqXHR, status, errorThrown) {
alert("Something bad happened: " + status + ', ' + errorThrown);
}
};<html>
<head>
<style>
#map {
height: 300px;
margin: 0px;
padding: 300px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>