Jag håller just nu på med att utveckla en applikation som jobbar mot Google Maps, och har stött på ett nytt problem. Jag vet inte om detta problem är relaterat till mitt tidigare problem, men det verkar snarlikt. Jag startar i alla fall en ny tråd, eftersom detta är något helt annat.
Jag har en funktion som ser ut så här:
function toggleMarkers() {
// Kolla om markers är laddade i markersArray
if (markersArray.length == 0) {
loadMarkers();
}
// Kolla om markers är synliga, om inte så gör de synliga
// och gör även associerade infoboxes synliga
if (markersArray(0).getMap() == null) {
for (var x=0;x<markersArray.length;x++) {
markersArray[x].setMap(map);
infoBoxArray[x].show();
}
} else {
for (var x=0;x<markersArray.length;x++) {
markersArray[x].setMap(null);
infoBoxArray[x].hide();
}
}
}
Problemet är att när jag kör toggleMarkers() första gången så visas endast en av markers:arna, det vill säga den första. När jag kör den en gång till så döljs den (vilket ju är tanken, eftersom den första markersen är synlig nu, så alla skall göras osynliga). Det är först tredje gången som jag kör toggleMarkers() som alla markers och InfoBoxes dyker upp. Efter lite efterforskning verkar det som att den vill köra infoBoxArray[x].show() innan jag ens har laddat in alla InfoBox-objekt i arrayen. Har nämligen testat att kommentera bort den raden, och då funkar allt! Men detta är ju konstigt, eftersom alla InfoBox-objekt ska ju ha laddats in i och med att loadMarkers() körs? Så det som verkar har hänt är att efter att toggleMarkers() har körts första gången så är allting inladdat i båda arrayerna, men den verkar ha för bråttom med att köra det som finns i for-loopen innan loadMarkers() är färdig?
Felmeddelandet som fås är "'this.div_.style' is null or not an object" och pekar på rad 633 i denna fil, som är sista raden innan slutklammern på denna funktion:
/**
* Shows the InfoBox.
*/
InfoBox.prototype.show = function () {
this.isHidden_ = false;
this.div_.style.visibility = "visible";
};
Om det finns intresse så ser loadMarkers() ut så här:
function loadMarkers() {
for ([...]) {
// ...
// Massa kod som bl.a. ger name och position
// ...
var marker = new google.maps.Marker({
position: position,
map: null,
title: name
});
var ibOptions = {
content: name,
boxStyle: {textAlign: "center", fontSize: "6pt", color:
"#000", width: "50px"},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -5),
position: position,
closeBoxURL: "",
isHidden: true,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(ibOptions);
ibLabel.open(map);
markersArray.push(marker);
infoBoxArray.push(ibLabel);
}
}
Jag sökte runt lite på nätet, men det var ingen som hade haft samma problem... dock fanns några som hade snarlika problem med Googles inbyggda infowindow, men då hade Google-utvecklarna fixat det och pratat om nåt som var DOM-relaterat. Jag är dock inte så haj på DOM-görat, så jag vet inte riktigt hur jag ska fixa detta. Någon som har en idé?