Avatar billede k_skriver Juniormester
08. august 2017 - 14:04

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>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester