Вы добавляете marker к markerClusterer перед созданием объекта маркера. Из-за этого нулевой / пустой объект попадает в markerClusterer, у которого нет функции getPosition.
Вам необходимо переместить метод markerClusterer.addMarker ниже после создания маркера, как показано ниже.
// inside the loop
markerClusterer.addMarker(marker); // Move this line
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
до
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
// inside the loop
markerClusterer.addMarker(marker); // Move it here
Similary markers Массив не инициализируется перед созданием объекта markerClustered. Вы можете создать пустой массив для передачи в функцию, как указано ниже.
var markersArray = new Array();
var markerClusterer = new MarkerClusterer(map, markersArray , {imagePath: "../img/icons/markerclusterer/m"});
Когда я просмотрел оставшийся код, проблем стало намного больше. Переместил немного кода и добавил комментарии в CAPS с префиксом «J -»
Код ниже решает некоторые проблемы, которые я заметил. Однако код не тестируется, поскольку вы получаете данные со страницы PHP.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(51.93916880428746, -0.504345273716126),
zoom: 11
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
// var mapxmlloc = '../maps/GenerateMarkers.php?type=area&town=' + $("#viewtown").val();
downloadUrl('../maps/GenerateMarkers.php?type=area', function(data) {
// J - INITIALIZE MARKERS ARRAY AND BOUNDS BEFORE THE LOOP ITERATION
var markersArray = new Array()
var bounds = new google.maps.LatLngBounds();
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
// J - ADD LISTENER IMMEDIATELY AFTER ADDING
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
// J - ADD MARKER TO THE ARRAY.
markersArray.push(marker);
// J - ADD POINT TO EXTEND THE BOUNDS
bounds.extend(point);
}); // J - END FOR EACH ITERATION HERE
// J - CREATE MARKER CLUSTER USING THE MARKERS ARRAY
var markerClusterer = new MarkerClusterer(map, markersArray, {imagePath: "../img/icons/markerclusterer/m"});
// J - FIT THE BOUNDS TO THE MAP JUST ONCE OUTSIDE THE LOOP
map.fitBounds(bounds);
// THE AREAOUTSIDE POLYGON NEEDS TO BE GREATED JUST ONCE, SO MOVED IT OUT OF THE LOOP
// Define the LatLng coordinates for the polygon's path.
var Area = [
{lat: 51.9111974504221, lng:-0.700698528012367},
{lat: 52.0351347507547, lng:-0.643706950863929},
{lat: 52.018657752549, lng:-0.576415691098304},
{lat: 52.0317553486016, lng:-0.511871013363929},
{lat: 52.0258407801943, lng:-0.426726970395179},
{lat: 52.0359795613826, lng:-0.350509319027992},
{lat: 51.9970768309839, lng:-0.356143903446877},
{lat: 51.9860834929546, lng:-0.366786908817971},
{lat: 51.9594345951621, lng:-0.372966718388283},
{lat: 51.9607039496942, lng:-0.391506147099221},
{lat: 51.9426122542336, lng:-0.390132856083596},
{lat: 51.9115396390844, lng:-0.385371899137112},
{lat: 51.8756431849685, lng:-0.350498775159167},
{lat: 51.8739474946844, lng:-0.357193568860338},
{lat: 51.8613337917255, lng:-0.35015545240526},
{lat: 51.8368163993317, lng:-0.394237032444834},
{lat: 51.8547386835508, lng:-0.432860842259287},
{lat: 51.840104453352, lng:-0.463244905979991},
{lat: 51.8500732137816, lng:-0.4774928002671},
{lat: 51.8057051120858, lng:-0.5543970971421},
{lat: 51.8775924472208, lng:-0.592407560093079},
{lat: 51.891668332384, lng:-0.630516385776672},
{lat: 51.8909267401722, lng:-0.642876004917297},
{lat: 51.9003546441251, lng:-0.651630735141907},
{lat: 51.9007783236945, lng:-0.675663327915344},
{lat: 51.9110513299895, lng:-0.700725888950501}
];
//Construct the polygon.
var AreaOutside = new google.maps.Polygon({
paths: Area,
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#ffffff',
fillOpacity: 0
});
AreaOutside.setMap(map);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}