Google Maps – HTML invoegen in XML bestanden – dl 2 (14)
Een terugkerende vraag is hoe je HTML kunt toevoegen aan Google Maps. Denk hierbij aan toelichtingen, hyperlinks en afbeeldingen. De mogelijkheid die ik had bedacht tot nu toe was niet echt handig. De nieuwe oplossing blijkt eenvoudiger dan verwacht. Aangezien ik al een tijd niets meer heb geschreven dit bonus artikel voor vandaag!
1. Een nieuw element toevoegen aan data.xml
In de eerste plaats moeten we het data.xml bestand aanpassen. In oudere versies gebruikten we het attribuut 'html' om de HTML kwijt te kunnen. Dat gaf nogal wat beperkingen. De oplossing is een nieuw element te hangen onder het marker element: infowindow.
Dit nieuwe element kunnen we niet zomaar met nieuwe HTML vullen. Dit moet binnen CDATA commentaar. Met CDATA kan je een XML document aangeven dat alles wat daarbinnen staat niet geëvalueerd moet worden.
Een vergelijking tussen de oude en de nieuwe versie maakt het verschil meteen duidelijk:
<markers>
<marker address="Prinsengracht 267, Amsterdam" html="<strong>Anne Frank Huis</strong>"/>
<marker address="Damrak 277, Amsterdam" html="<strong>Beurs van Berlage</strong> <br/><br/>De Beurs van Berlage is vernoemd naar de architect Berlage."/>
</markers>
wordt
<infowindow><![CDATA[<b>Anne Frank Huis</b><br/>Lees meer over <a href="http://www.annefrankhuis.nl" target="new">Anne Frank</a>]]></infowindow>
</marker>
<marker address="Damrak 277, Amsterdam" label="Beurs van Berlage">
<infowindow><![CDATA[<b>Beurs van Berlage</b><br/>De Beurs van Berlage is vernoemd naar de architect Berlage.]]></infowindow>
</marker>
Een nieuwe element is overigens ook het label attribuut. Dit gebruiken we voor de linkjes in naast de kaart.
2. Je javascript functies aanpassen
Om nu de informatie uit dit nieuwe infowindow element te kunnen lezen, moet je je maps.js bestand een klein beetje aanpassen. Dit heb ik in het vorige artikel al gedaan, maar nog niet toegelicht. De oorspronkelijke code voor het tonen van HTML was:
for (var i = 0; i < markers.length; i++) {
var address = markers[i].getAttribute("address");
var html = markers[i].getAttribute("html");
showAddress(map,geocoder,address,html,icon);
} //close for loop
Dit vervangen we nu door
for (var i = 0; i < markers.length; i++) {
var address = markers[i].getAttribute("address");
var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
var label = markers[i].getAttribute("label");
showAddress(map,geocoder,address,html,label,icon);
} //close for loop
Er zijn drie veranderingen:
a) de html halen we op door gebruik te maken van de functie getElementsByTagName.
b) we halen hetlabel op
c) we geven deze informatie door aan de functie showAddress
In de functie showAddress geven we zowel html als label weer door aan de volgende functies. Zie de nieuwe versie van maps.js en data.xml voor nadere details.
Het eindresultaat
Een technisch verhaal, maar je zult zien dat dit de mogelijkheden van je script enorm verrijkt. Zie voor een voorbeeld het eindresultaat tot nu toe.
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)
Bart
12.02.09 - 14:59
Werkt super.
Maar nou wil ik html ophalen uit een xml document. En de markers ophalen via coordinaten (en niet middels een adres, want bij veel adressen geeft dat veel foutmeldingen). Hoe werkt dat?
Groet!
Bart
Theo Bakker
23.02.09 - 22:02
Dag Bart,
Hoe je de HTML ophaalt leg ik hierboven uit. Hoe je in plaats van een adres kan je coördinaten kan gebruiken heb ik uitgelegd in deel 6 van deze serie.
Groet, Theo
Peter
24.04.09 - 16:10
Voorbeeld werkt niet bij mij:
- NULL – fout !
Frans
13.09.09 - 9:41
Heb gewerkt volgens de handleiding stap voor stap en het werkt geweldig. Dit alles zonder problemen.
Mijn dank voor de perfecte handleiding en de mogelijkheid om dit snel te leren.
Heb nog een vraagje:
Heb een gpx-bestand van mijn (wandel)navigatie op de computer gezet. Is het mogelijk dat ik deze route en markeringspunten op een of andere manier op mijn site kan importeren zodat de kaart in mijn site gezet kan worden?
Frans
Vincent
02.02.10 - 15:35
Ik heb het goed doorlopen totdat ik een xml bestand moet inladen in het html gedeelte?
welk programma gebruiken jullie eigenlijk bij het type van de code.
en waarom krijg ik steeds een error dat mijn xml file niet bereikbaar is.
graag jullie hulp