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>
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.

Opret Preview

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





Premium
Microsoft bekræfter gigant-opkøb af AI-selskabet Nuance
Nuance Communication, der blandt andet har leveret teknologi til Apples Siri, er blevet opkøbt af Microsoft, der mandag eftermiddag bekræfter handlen.
Computerworld
Gigantisk datalæk: 600.000 danskeres Facebook-data offentliggjort på hackerforum
Data om 533 millioner Facebook-brugere på verdensplan er i weekenden blev lækket på hackerforum.
CIO
Har du rost din mellemleder i dag? Snart er de uddøde - og det er et tab
Computerworld mener: Mellemledere lever livet farligt: Topledelsen får konstant ideer med skiftende hold i virkeligheden, og moden går mod flade agile organisationer. Men mellemlederen er en overset hverdagens helt med et kæmpe ansvar. Her er min hyldest til den ofte latterliggjorte mellemleder.
Job & Karriere
"Vi var nødt til at sige til dem, at I er nødt til at sende ham hjem nu, for han begynder at knække"
"Vi var nødt til at sige til dem, at I er nødt til at sende ham hjem nu, for han begynder at knække"
White paper
Ryk SAP-workloads i skyen – og tag alle de kendte fordele med
SAP-kunder verden over har gennem de seneste 15 år draget fordel af løsninger baseret på NetApps ONTAP-data management-platform. Herunder en mere sikker og stabil drift samt forenklet administration, hvilket er afgørende for at gennemføre projekter effektivt og for at reducere deres risikoprofil. Gennem de seneste år er det i høj grad også blevet muligt at rykke SAP-workloads i skyen, og det ønsker mange virksomheder rimeligvis at drage fordel af – men uden at sige farvel til mulighederne med NetApp ONTAP. I dette whitepaper stiller vi skarpt på mulighederne for at indarbejde NetApp Cloud Volumes ONTAP and Azure NetApp Files som del af en SAP-strategi baseret på Microsoft Azure.