Google Maps Marker
Over HTML en CSS kan ik nog wel redelijk mee praten, maar daar houdt mijn kennis dan ook wel op. Van complexere “talen” zoals JavaScript heb ik echt geen verstand (hoewel ik wel begrijp hoe het werkt, alleen weet ik niet hoe je het opschrijft). Met een beetje knippen en plakken kan ik nog wel wat stappen maken, maar op dit moment loop ik vast.
Doel:
Een “interactief” Google Maps kaartje met meerdere markers (locatievlaggen) integreren op een webpagina, waarbij er informatie in een tekstballon getoond wordt wanneer er op een marker geklikt wordt. De informatie per marker verschilt.
Wat lukt:
• De Google Maps kaart integreren op de webpagina
• Meerdere markers op de kaart vertonen
• Een tekstballon tonen wanneer er op een marker geklikt wordt
Wat mislukt:
• Verschillende informatie per marker in de tekstballon krijgen (is nu telkens dezelfde informatie)
Huidige status:
http://www.marvinjames.nl/testmarker.html
Uitleg:
In de array gegevens zijn meerdere locaties (locatienaam, lengtegraad, breedtegraad) opgenomen.
Om meerdere markers te genereren wordt er een for-loop gebruikt.
Om de een of andere reden lukt het de Javascript code wel om van de verschillende locaties de coördinaten uit te lezen, maar voor de informatie in de tekstballon enkel de laatste record uit de array gegevens gepakt!
De markers staan dus wel op verschillende plaatsen, maar de informatie is overal hetzelfde.
Ik vind het heel merkwaardig dat de verschillende coordinaten wel gepakt worden, maar de verschillende informatie niet.
Daarentegen weet ik niet helemaal wat ik doe, dus ik zal zeker iets fout doen. Misschien weet iemand anders raad?
Ik heb de code hier niet vermeld in verband met de lap tekst. Deze kan op de URL hierboven teruggevonden worden (paginabron bekijken), maar als er behoefte is aan de code, kan ik hem er natuurlijk zo bij plakken.
Alvast bedankt! Ik zou er erg geholpen mee zijn.
Toevoeging op 13/12/2012 16:08:19:
Het is uiteindelijk gelukt!
De variabele "flags" werd niet meegenomen in de laatste functie van de for-loop.
Door een extra function() op te nemen in de for-loop werkt het wel!
Ik ging je net dit voorstellen
Code (php)
1
2
3
4
5
6
2
3
4
5
6
google.maps.event.addListener(markers[i], 'click', function() {
var marker = this;
var markerIndex = getMarkerIndex(marker, markers); // je wil weten om welke marker het gaat. De functie geeft de index terug en die hebruik je als index voor gegevens[deze_index][0]
infoWindow.setContent(gegevens[markerIndex][0]);
infoWindow.open(map, marker);
});
var marker = this;
var markerIndex = getMarkerIndex(marker, markers); // je wil weten om welke marker het gaat. De functie geeft de index terug en die hebruik je als index voor gegevens[deze_index][0]
infoWindow.setContent(gegevens[markerIndex][0]);
infoWindow.open(map, marker);
});
met dan de functie
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function getMarkerIndex(needle, haystack) {
for (var i=0; i<haystack.length; i++) {
if (haystack[i] == needle) {
return i;
}
}
return false;
}
for (var i=0; i<haystack.length; i++) {
if (haystack[i] == needle) {
return i;
}
}
return false;
}
... maar houd maar wat je nu hebt.
Gewijzigd op 13/12/2012 16:20:01 door Kris Peeters