Marker zusammenfassen

Am Beispiel Mc Donalds-Filialen in Deutschland(allerdings Stand 1890). Zusammenfassung der Standorte auf Basis des Abstandes auf der Karte um Markerüberlappung zu vermeiden.

Durch Zoomen der Karte wird es bis zum einzelnen Standort aufgelöst.

Quellcode Zusammenfassung Marker

Laden der MAP-API nach einer Bestätigung o.ä...

YOURKEYHERE bitte durch Deinen API-Key ersetzen. Informationen dazu bei Google.

Laden der Cluster-Funktion. Script kann hier betrachtet werden: klick

//zur Sicherheit, falls Laden der API etwas dauert
setTimeout(function () {
    //Center-Koordinaten
    var center = new google.maps.LatLng(51.082908795747755,10.079749086097314);
    //Anzeigen der Karte
    $("#map_canvas").removeClass("d-none");
    //Initialisieren der Karte
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 5,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    //Laden der Standortdaten
    var json = hinzechScripts._getData("/data/mcd_de.json");
    var markers = [];
    //fuer jeden Standort einen Marker erstellen
    for (var i = 0; i < json.locations.length; i++) {
        var obj = json.locations[i];
        var latLng = new google.maps.LatLng(obj.lat,
            obj.lng);
        var marker = new google.maps.Marker({
            position: latLng
        });
        markers.push(marker);
    }
    //Icons für die Zusammenfassungen
    mcOptions = {
        styles: [{
            height: 53,
            url: "https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/images/m1.png?raw=true",
            width: 53
        },
        {
            height: 56,
            url: "https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/images/m2.png?raw=true",
            width: 56
        },
        {
            height: 66,
            url: "https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/images/m3.png?raw=true",
            width: 66
        },
        {
            height: 78,
            url: "https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/images/m4.png?raw=true",
            width: 78
        },
        {
            height: 90,
            url: "https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/images/m5.png?raw=true",
            width: 90
        }]
    }
    //Init Cluster und Zuweisung zur Karte
    var mc = new MarkerClusterer(map, markers, mcOptions);
}, 500);

Youtube

aktuelle Anzahl Videos:

128

Alles anschauen

letztes Video

Assassin's Creed Valhalla: Rüstung der Verborgenen gleich nach Ankunft in Englaland (15:29 min)

Assassin's Creed Valhalla: Erbeuten der Verborgenen-Rüstung gleich zu Beginn; Die Rüstung ist das ganze Spiel nutzbar und durch den sofortigen Erhalt genügt es, Ressourcen nur für diese für dessen Aufwertung zu verwenden.

Zuletzt in diesem Kino

14.01.2018

Admin

Endlich Saisonbeginn

Endlich gings los. Diesmal am Flumserberg...
Read more

07.05.2017

Admin

Der Rockstar unter den Komponisten

Als Oscar-Preisträger Hans Zimmer im Frühjahr 2016 erstmals auf Konzertreise ging, waren die Arenen in den grossen europäischen Städten restlos ausverkauft. Diesmal sind wir dabei...
Read more

Marker zusammenfassen

Beispiel

Quellcode Zusammenfassung Marker

Source: HTML

Source: JavaScript #1 - Laden der API

Source: JavaScript #2 - Laden der Cluster-Funktion

Source: JavaScript #3 - Initialisieren der Karte

Endlich Saisonbeginn

Der Rockstar unter den Komponisten