Google Maps – meerdere tekstballonnen (7)
In het vorige artikel heb je met hulp van een XML document meerdere markers ingeladen op je Google Map. De volgende stap is dit ook te doen met de tekstballonnen die je wilt laten zien. Om de code overzichtelijker te maken zal ik deze eerst wat anders indelen.
De Javascript code scheiden van de HTML pagina
In de eerste plaats scheid je de Javascript code van de webpagina. Dit heeft het voordeel dat je het apart kunt bewerken. Als je een programma gebruikt zoals Eclipse, dan kan je je Javascript eenvoudiger controleren op fouten. Maak voor de code een apart bestand, en roep dit aan in de header:
De load() functie van je Google Map opdelen
De load() functie is nu nog één grote functie. Deze deel je op in twee functies. Uit de load() functie haal je de code die nodig is voor het aanmaken van een marker, met de click eventlistener voor het InfoWindow. Deze plaats je in een nieuwe functie: createMarker(). (Zie voor een uitleg over deze termen het artikel over Google Maps en tekstballonnen in deze serie.)
function createMarker(point,html){
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Het XML document voorzien van informatie voor de tekstballonnen
Het XML document verrijk je nu met de informatie voor je tekstballon. Dit doen we voorlopig met een extra attribuut: html. Hierin staat de inhoud van de tekstballon. Je XML bestand ziet er nu alvolgt uit:
<markers>
<marker lat="52.375066" lng="4.883756" html="Anne Frank Huis"/>
<marker lat="52.375300" lng="4.896059" html="Beurs van Berlage"/>
</markers>
TIP Je zult merken dat bij het aanroepen van dit xml bestand met GDownloadUrl() je browser het bestand cachet. Hierdoor worden wijzigingen niet meegenomen. Hiervoor is een eenvoudige oplossing: voeg bij het aanroepen een extra parameter toe met een willekeurig nummer. Dit kan je op de volgende manier in je Javascript bestand doen:
var randomnumber=Math.floor(Math.random()*11111)
GDownloadUrl("xml/17/data.xml?random="+randomnumber, function(data, responseCode) { …
De tekstballonnen aanroepen
Wijzig de load functie nu zo dat je de HTML informatie aanroept en dit doorgeeft aan de nieuwe functie.
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
//create randomnumber and retrieve xml file
var randomnumber=Math.floor(Math.random()*11111)
GDownloadUrl("xml/17/data.xml?random="+randomnumber, function(data, responseCode) {
var xml = GXml.parse(data);
//store markers in markers array
var markers = xml.documentElement.getElementsByTagName("marker");
//loop over the markers array
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("html");
map.setCenter(point, 14);
var marker = createMarker(point,html);
map.addOverlay(marker);
} //close for loop
}
); //close GDownloadUrl
} //close GBrowserIsCompatible
} //close load
Zoals je kunt zien plaats je elke element dat van belang is binnen de for loop eerst in een variabele en geef je die daarna door aan twee onderdelen: 1) je point en 2) de nieuwe createMarker functie. Hierna zet je alles op de kaart met de map.addOverlay(marker) functie.
TIP Zet commentaar bij je afsluitende code; zo weet je precies waar je functies ophouden.
Het eindresultaat
Het eindresultaat is klaar: een Google Map met meerdere tekstbalonnen geladen vanuit een XML bestand.
Google Map met meerdere tekstballonnen
Hoe nu verder?
De volgende stap is een route uit te stippelen tussen deze twee punten die aangeeft hoe je bezoeker moet lopen. Hierover meer in het volgende deel.
Meer lezen
- Dit artikel is gebaseerd op een toelichting van Mike Williams op de Google Maps API.
- Het Javascript bestand van dit tutorial
Artikelenserie - Google Maps
- Google Maps op je contactpagina – de basis (1)
- Google Maps op je contactpagina – inzoomen (2)
- Google Maps op je contactpagina – satellietkaarten (3)
- Google Maps op je contactpagina – markers (4)
- Google Maps – tekstballonnen (5)
- Google Maps – meerdere markers (6)
- Google Maps – meerdere tekstballonnen (7)
- Google Maps polylines – verbindingslijnen tussen markers (8)
- Google Maps – eigen markers maken (9)
- Google Maps – HTML invoegen in XML bestanden (10)
- Google Maps – de taal van je kaart instellen (11)
- Google Maps – markers op basis van adressen (12)
- Google Maps – hyperlinks naar markers naast je kaart (13)
- Google Maps – HTML invoegen in XML bestanden – dl 2 (14)
- Google Maps – Een serverswitch voor je Google API key (15)
Google Maps polylines - verbindingslijnen tussen markers (8) - WHELP!
13.06.07 - 11:41
[...] het vorige artikel in deze serie heb ik uitgelegd hoe je meerdere tekstballonnen in je Google Maps zet. Nu de volgende stap: het verbinden van markers om bijvoorbeeld een route uit [...]
Koen Mein
02.04.08 - 22:23
Met behulp van jouw uitstekende informatie heb ik het voor elkaar gekregen om meerdere markers en ballonnen te creëren op de volgende webpagina http://www.bvo-emden.de/index.php?option=com_wrapper&view=wrapper&Itemid=29.
Dit werkt allemaal prima onder I.E. 7, maar helemaal niet onder Firefox. Heb je hier misschein een oplossing voor?
groet,
Koen Mein
Theo Bakker
02.04.08 - 23:00
Dag Koen,
de reden is denk ik dat je de map.addOverlay(marker); buiten de for loop hebt gezet; hierdoor is de marker variabele niet bekend.
Probeer het anders even uit in IE 6, dan zul je zien dat er een runtime error optreedt.
Groet, Theo
Sandra
25.09.09 - 13:48
Ik ben ook zo ver gekomen dat ik meerdere markers en tekstballonnen had.
Heel enthousiast ben ik meerdere markers gaan plaatsen in mijn data.xml.
Helaas heb ik nu een grijs beeld en is heel mijn kaartje verdwenen…
Hoe kan dit komen?
http://www.hrdesign.nl/test
Groetjes Sandra
Antonio
15.02.10 - 11:28
Nu heb ik alles werkend maar ik erger me aan mijn lettertype. Hij gebruikt standaard Times new roman en dan ook nog te groot. Hoe kan in deze style aanpassen naar mijn smaak?
Wouter
15.04.10 - 16:12
Hoi Theo,
Ik heb nu de hele kaart, met meerdere markers. Precies zoals hier is uitgelegd. Maar nu kan je niet meer zoomen. Hoe moet je dat instellen? Want de functie die je bij les 2 verteld werkt niet meer.