-2
地図上にはマーカーの数が増えているため、マーカークラスターを追加しようとしていて、しばらく走っている地図があります。Google Map MarkerClusterer
私はコーディングの多くを変更したくはありません。すべてが正常に動作しているからですが、カスタムマーカーをクラスタ化する方法を理解できません。
ここではJavascriptがマップのために私が持っているコーディングです：
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);
};
私はちょうど何か...地図作品を欠けている場合、マーカーがあるかわからないこの時点で、彼らだけでドンクラスター化したい
サイトのサーバーに画像とmarkercluster.jsファイルが保存されているので、問題ではありません。
私はJSファイルを呼び出しているHTMLコードは次のとおりです。
<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>
「markerClusterer」には1つのマーカーしか渡していません。 – MrUpsidown