Google Map MarkerClusterer

Question

Ich habe eine Karte, die ich schon seit einiger Zeit benutze, nur um Markercluster hinzuzufügen, da es jetzt genug Marker auf der Karte gibt, die es schwierig machen zu sehen, was passiert.

Ich möchte nicht viel von der Codierung ändern, da alles funktioniert, wie es sollte, aber für was auch immer ich nicht herausfinden kann, wie man die benutzerdefinierten Markierungen zum Cluster bekommt.

Hier ist Javascript Codierung ich für die Karte haben:

var marker; 

function pan(latlon) { 
    var coords = latlon.split(","); 
    var panPoint = new google.maps.LatLng(coords[0], coords[1]); 
    map.panTo(panPoint) 
} 

var map; 

function initialize() { 

    var mhbrewco = { 
    lat: 50.062254, 
    lng: -110.71656 
    } 
    var mapOptions = { 
    zoom: 6, 
    center: new google.maps.LatLng(52.086594, -113.307591), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    scrollwheel: false, 
    mapTypeControl: false, 
    streetViewControl: false 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var BrewIcon = 'http://medicinehatbrewingcompany.ca/wp-content/uploads/2016/08/favicon-32x32-1.png'; 

    marker = new google.maps.Marker({ 
    map: map, 
    position: mhbrewco, 
    icon: BrewIcon 
    }); 

    var contentString = '<div id="content">' + 
    '<div id="siteNotice">' + 
    '</div>' + 
    '<h1 id="firstHeading" class="firstHeading">Medicine Hat Brewing Company</h1>' + 
    '<div id="bodyContent">' + 
    '<p><b>Address:</b>' + 
    ' 1366 Brier Park Dr NW' + 
    ' Medicine Hat, AB T1C 1Z7</p>' + 
    '<p><b>Phone:</b> <a href="tel:+14035251260">(403)525-1260</a>' + 
    '</div>' + 
    '</div>'; 

    var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
    }); 

    marker.addListener('click', function() { 
    infowindow.open(map, marker); 
    }); 

    jQuery(document).ready(function($) { 
    $('.location').on('click', function() { 
     map.setZoom(9); 
     pan($(this).data('location')); 
    }); 
    }); 

setMarkers(map); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

var liquorstores = [ 
    ['Silver Buckle Sports Bar', 50.032566, -110.665056, 1], 
    ['After Work "O"asis', 50.059230, -110.669693, 2], 
    ['Moxies Grill & Bar', 50.009886, -110.650260, 3], 
    ['MHC Crave', 50.017578, -110.685868, 4], 
    ['Cheers Neighbourhood Pub', 50.054084, -110.699307, 5], 
    ['Industry Pub', 50.031567, -110.663139, 6], 
    ['District Bar and Grill', 50.062417, -110.736581, 7], 
    ['Mainliner Pub', 50.039407, -110.670529, 8], 
    ['The Underground Tap & Grill', 53.541643, -113.490748, 9], 
    ['Mauros Italian Cafe & Bar', 50.044930, -110.686023, 10], 
    ['Crossroads Liquor Store', 50.024438, -110.709010, 11], 
    ['Aberdeen Spirits', 50.035819, -110.676820, 12], 
    ['Southwest Liquor Store', 50.032651, -110.696367, 13], 
    ['Scoreboard', 50.008101, -110.646687, 14], 
    ['Medicine Hat Lodge', 50.000983, -110.642278, 15], 
    ['Rickys All Day Grill', 50.030527, -110.705316, 17], 
    ['Beer Revolution', 53.546561, -113.523155, 18], 
    ['Trackside Liquor Store', 50.030117, -110.659201, 19], 
    ['Liquor Barn | Maple Avenue', 50.041581, -110.670394, 20], 
    ['Liquor Barn | 3rd Street', 50.041329, -110.671092, 34], 
    ['Liquor Barn | Dunmore', 50.017225, -110.658228, 35], 
    ['Liquor Depot | Strachan', 49.995760, -110.643673, 36], 
    ['State & Main', 50.063257, -110.688831, 22], 
    ['Ralphs Texas Bar & Grill', 50.006719, -110.666115, 23], 
    ['Bearded Bull', 50.037939, -110.676179, 24], 
    ['Arcadia Bar', 53.556990, -113.536204, 25], 
    ['Hat Liquor Store', 50.032125, -110.684876, 26], 
    ['Sherbrooke Liquor Store', 53.570989, -113.548680, 27], 
    ['Sobeys Cornerstone Liquor Store', 49.997892, -110.644211, 28], 
    ['Northlands Co-Op Liquor Store', 50.063772, -110.685896, 29], 
    ['Paul Howe Liquor Store', 50.059006, -110.669569, 30], 
    ['Royal Liquor Store', 50.041701, -110.675085, 31], 
    ['Ace Liquor Store', 50.062650, -110.687808, 33], 
    ['Rosscos Pub', 50.0082223, -110.6462413, 34], 
    ['Sierra Springs Liquor', 51.2586657, -114.0049453, 35], 
    ['Brooks Liquor Store', 50.5747185, -111.9083015, 36], 
    ['Brooks North End Liquor Store', 50.5747185, -111.9083015, 37], 
    ['Heritage Inn & Suites', 50.5838092, -111.9008177, 38], 
    ['Thirstys Cold Beer & Spirits', 50.0538104, -110.7017657, 39], 
    ['Beer Revolution', 51.0431417, -114.083346, 40], 
    ['Dunmore Liquor Store', 50.0118551, -110.6532196, 41], 
    ['Eagle Butte Liquor Store', 49.9707704, -110.5748527, 42], 
    ['The Cypress Club', 50.0402075, -110.6783379, 43], 
    ['Esplanade Arts & Heritage Centre', 50.04008, -110.6834557, 44], 
    ['LOCAL Public Eatery', 50.0394332, -110.677978, 45], 
    ['Park Lane Cold Beer Store', 50.0325614, -110.7080837, 46], 
    ['Rustic Kitchen & Bar', 50.0322693, -110.7105375, 32], 
    ['South Co-Op Liquor Store', 50.0101276, -110.6650279, 47], 
    ['Canex', 50.2513133, -111.1739837, 48], 
    ['Bronco Billys Doll House', 50.0786134, -110.7844054, 49], 
    ['Whos On 3rd', 50.0769917, -110.7872064, 50], 
    ['Liquor on McLeod', 53.5439296, -113.8868955, 51], 
    ['Redcliff Co-Op Liquor Store', 50.0791044,-110.780469, 52], 
    ['Royal Liquor Store', 50.0414673,-110.6748202, 53], 
    ['Cheesecake Cafe', 49.9958717,-110.6438655, 54] 
]; 

function setMarkers(map) { 

    var markerlink = 'http://medicinehatbrewingcompany.ca/wp-content/uploads/2017/03/wheat-icon-marker.png'; 

    var markerlink = { 
    url: 'http://medicinehatbrewingcompany.ca/wp-content/uploads/2017/03/wheat-icon-marker.png', 
    size: new google.maps.Size(20, 32), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(0, 32) 
    }; 

    var shape = { 
    coords: [1, 1, 1, 20, 18, 20, 18, 1], 
    type: 'poly' 
    }; 

    var mcMarkers = []; 

    for (var i = 0; i < liquorstores.length; i++) { 
    var beach = liquorstores[i]; 
    var barMarker = new google.maps.Marker({ 
     position: { 
     lat: beach[1], 
     lng: beach[2] 
     }, 
     map: map, 
     icon: markerlink, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    mcMarkers.push(barMarker); 
    }; 

    var mcOptions = {gridSize: 50, maxZoom: 15, imagePath:'/htdocs/wp-content/themes/rhythm-child/images/m'}; 
    var markerCluster = new MarkerClusterer(map, mcMarkers, mcOptions); 
}; 

An diesem Punkt bin ich nicht sicher, ob ich etwas fehlt nur ich ... die Karte funktioniert, sind die Markierungen gibt, sie einfach don Ich möchte nicht clustern.

Ich habe die Bilder und die Datei markercluster.js auf dem Server der Website gespeichert, so dass auch kein Problem sein sollte.

Der HTML-Code, den ich die js Dateien Aufruf ist:

<a name="locations"></a> 

<div id="map-canvas"></div> 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBytnwKLLyI6WBkpIltO6Qj_CaAZc_QQLI"></script> 

<script src="http://www.medicinehatbrewingcompany.ca/htdocs/wp-content/themes/rhythm-child/js/markerclusterer.js"></script> 

Answer 1

jedes Ihres Marker in ein Array hinzufügen

// Create empty array of Markers 
var markers = []; 

for (var i = 0; i < liquorstores.length; i++) { 
    var beach = liquorstores[i]; 
    var barMarker = new google.maps.Marker({ 
    position: { 
     lat: beach[1], 
     lng: beach[2] 
    }, 
    map: map, 
    icon: markerlink, 
    shape: shape, 
    title: beach[0], 
    zIndex: beach[3] 
    }); 

    // Add marker to the array 
    markers.push(barMarker); 
}; 

Und dann das Marker-Feld zu dem Clusterer passieren.

var markerCluster = new MarkerClusterer(map, markers, mcOptions);