I have a google "my maps" map that contains 5 layers. I've exported each layer out as a .kmz file and imported those layers into a custom.html file using the Google Maps javascript API.
The code is below. The issue I'm trying to address is overlapping markers that share the same lat/long. There can be up to 5 overlapping markers at each location (1 for each layer of my map).
I've seen some references to adding the "spiderfy" library to fix this. However, I can't find any examples that indicate it works with KML layer data.
Can spiderfy work with .kml files? I've tried to implement the code in the "basic demo" on the spiderfy github site but its not spiderfying.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
/* FUBO TV */
var ctaLayer = new google.maps.KmlLayer({
url: 'http://streambuzz.net/wp-content/uploads/fubo-data.kmz',
map: map
});
/* PLAYSTATION VUE */
var ctaLayer = new google.maps.KmlLayer({
url: 'http://streambuzz.net/wp-content/uploads/psvue-data.kmz',
map: map
});
/* HULU */
var ctaLayer = new google.maps.KmlLayer({
url: 'http://streambuzz.net/wp-content/uploads/hulu-data.kmz',
map: map
});
/* DIRECTV NOW */
var ctaLayer = new google.maps.KmlLayer({
url: 'http://streambuzz.net/wp-content/uploads/dtvnow-data.kmz',
map: map
});
/* YOUTUBE TV */
var ctaLayer = new google.maps.KmlLayer({
url: 'http://streambuzz.net/wp-content/uploads/yttv-data.kmz',
map: map
});
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initMap">
</script>
Check OverlappingMarkerSpiderfier.
Demo here.
It deals with overlapping markers in Google Maps JS API v3, Google Earth-style
Of course you need to parse the KML into an array first (geoxml-v3).