Google maps cluster-funktion
Hej,Nogen der kan hjælpe mig med at lave en 'cluster-funktion' på mit Google kort?
Lidt i stil med :
https://developers.google.com/maps/documentation/javascript/marker-clustering
- men bygget ind i min HTML-fil (som bruges på http://www.dencon.dk/Kontakt/Forhandlere/Eksport.aspx - bemærk især Finland) :
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style type="text/css">
#linkboks, #linkboks p, #linkboks h1, #linkboks div, #linkboks a {color:#444;background-color:#fff;}
#linkboks h1 {font-size: 15px;}
#linkboks a {color: #760f12; font-weight: bold;}
#map * {overflow:visible;}
#map { height: 500px; }
</style>
<div id="map" style="width: 100%; height: 100%; min-height: 500px;"></div>
<script type="text/javascript">
var locations = [
//Finland
['Tila', '<p>AC Artesan Ky<br>Lönnrotinkatu 45<br>00510 Helsinki<br>T. 09 622 4393<br><a href="http://www.tilaan.com" target="_blank">www.tilaan.com</a></p><a href="mailto:info@tilaan.com">info@tilaan.com</a></p>', 60.1619881, 24.925522],
['Nomart OY', '<p>Merikasarminkatu 6<br>00160 Helsinki<br>T. 09 661 477<br><a href="http://www.nomart.fi" target="_blank">www.nomart.fi</a></p><a href="mailto:info@nomart.fi">info@nomart.fi</a></p>', 60.166864, 24.9727887],
['Vallila Interior', '<p>Nilsiänkatu 15<br>00510 Helsinki<br>T. 020 776 7700<br><a href="http://www.vallilainterior.fi" target="_blank">www.vallilainterior.fi</a></p><a href="mailto:vallila@vallilainterior.fi">vallila@vallilainterior.fi</a></p>', 60.1956393, 24.9491793],
//Frankrig
['Azergo', '<p>9001, avenue de Champlevert<br>69520 Grigny<br>T. +33 (0)4 78 16 88 48<br><a href="http://www.azergo.fr" target="_blank">www.azergo.fr</a></p><a href="mailto:contact@azergo.fr">contact@azergo.fr</a></p>', 45.600984, 4.784331],
function initMap() {
var customMapType = new google.maps.StyledMapType([{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-100},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-100},{"lightness":40}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-10},{"lightness":30}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":-60},{"lightness":10}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":-60},{"lightness":60}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"},{"saturation":-100},{"lightness":60}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"},{"saturation":-100},{"lightness":60}]}], {
name: 'SKAL SES'
});
var customMapTypeId = 'custom_style';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(56.3223926, 11.4052487),
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
}
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map,
title: (locations[i][0]),
icon: '/files/billeder/Storelocator/koeb-ikon.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<div id="linkboks">'+ '<h1>' + locations[i][0] + '</h1>'+ locations[i][1]+'</div>');
infowindow.open(map, marker);
}
})(marker, i));
}
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&callback=initMap">
</script>