• HomeSo sweet
• 4-stappenplanVoor je eigen site
• ArtikelenAlle 312
• Tools & DownloadsNiet veel, wel handig
• LinksHelpen je verder

Google Maps – HTML invoegen in XML bestanden (10)

In deel 7 van deze serie heb ik toegelicht hoe je met een XML bestand meerdere markers en tekstballonnen op een Google Map kunt zetten. In het XML bestand kan je ook HTML kwijt. Maar als je hierin opmaak kwijt wilt zul je gemerkt hebben dat dit niet direct werkt. In dit artikel een paar manieren om dit wel te kunnen: XML escaping of CDATA.

Wat is het probleem?
Een probleem dat optreedt met het invoegen van HTML in een XML attribuut is dat dit de XML zelf voortijdig afbreekt:

<… html="Beurs van Berlage<br/>De beurs ligt in Amsterdam"/>

In dit voorbeeld zorgt de code voor een nieuwe regel (<br/>) ervoor dat je XML bestand niet zal werken. Het laatste haakje (>) sluit namelijk de XML-regel zelf af. Je zult dus een manier moeten vinden om dit op te lossen.

Oplossing 1 – XML escaping
Dit houdt in dat je de tekens die van betekenis kunnen zijn in XML vervangt door code die dat niet is, HTML entities ook wel XML entities genoemd. Er zijn vijf tekens die van belang zijn:
< = < = kleiner dan
> = > = groter dan
' = ' = enkel aanhalingsteken (apostrophe)
" = " = dubbele aanhalingsteken (quote)
& = & = ampersand
Vervang in je code de tekens aan de linkerkant door de entities aan de rechterkant.

Dus <br/> wordt <br/>

Dit is niet echt handig. Voor je het weet maak je een fout en je code wordt volstrekt onleesbaar. Maar er is een alternatief: CDATA.

Oplossing 2: CDATA
Met het commando CDATA kan je een XML bestand aangeven dat alles wat volgt niet gelezen moeten worden als XML. Het commando geef je op de volgende manier:

<![CDATA[ ... ]]>

Dit is een stuk eenvoudiger:

<![CDATA[Beurs van Berlage<br/>De beurs ligt in Amsterdam]]>

Helaas kan deze code niet gebruikt worden in een attribuut (in ons geval het html attribuut van de Google Map).

Oplossing 3: XLST
Om de problemen hierboven te voorkomen is het beter om van het HTML attribuut een eigen element te maken en dit vervolgens te bewerken met XSLT. Hoe dit werkt zal ik nader toelichten in een volgend artikel in deze serie.

 

Artikelenserie - Google Maps

1. Google Maps op je contactpagina – de basis (1)
2. Google Maps op je contactpagina – inzoomen (2)
3. Google Maps op je contactpagina – satellietkaarten (3)
4. Google Maps op je contactpagina – markers (4)
5. Google Maps – tekstballonnen (5)
6. Google Maps – meerdere markers (6)
7. Google Maps – meerdere tekstballonnen (7)
8. Google Maps polylines – verbindingslijnen tussen markers (8)
9. Google Maps – eigen markers maken (9)
10. Google Maps – HTML invoegen in XML bestanden (10)
11. Google Maps – de taal van je kaart instellen (11)
12. Google Maps – markers op basis van adressen (12)
13. Google Maps – hyperlinks naar markers naast je kaart (13)
14. Google Maps – HTML invoegen in XML bestanden – dl 2 (14)
15. Google Maps – Een serverswitch voor je Google API key (15)

Vorig artikel in deze serie Volgend artikel in deze serie

Stem / Bookmark [?]

1. 
   Kees
   18.07.07 - 13:40
   1

   Komt volgende deel nog? ik zou graag weten hoe je ook nog style sheet kan i mplementeren in de XML bestand, voor de opmaak van de pop up in Googlemaps als je op een marker hebt gedrukt.

2. 
   Twente
   24.07.07 - 15:55
   2

   Ook ik ben benieuwd hoe HTML in de tags kan worden opgenomen….

3. 
   Theo Bakker
   27.07.07 - 20:20
   3

   Ik ben inmiddels terug van vakantie en zal zsm proberen het vervolg te schrijven.

   Groet, Theo

4. 
   Theo Bakker
   15.08.07 - 21:30
   4

   Een paar weken verder. Veel uitgeprobeerd en helaas (nog) niet met het gewenste resultaat. Een alternatief lijkt toch met een database oplossing te werken. Zodra ik meer resultaat heb, meld ik me weer.

   Groet, Theo

5. 
   Mike
   11.10.07 - 10:57
   5

   Ook ik geïnteresseerd in html mogelijkheden, hoop dat hier nog is uitleg over komt!

6. 
   Martijn
   01.01.08 - 22:31
   6

   Bij mij werkte de html value wel door het xml bestand als php te laten parsen, en op de eerste regel " op te nemen

7. 
   Martijn
   02.01.08 - 22:08
   7

   hmm toevallig bezoek ik deze pagina nogmaals, en zie ik dat de php code niet is opgenomen. nu nogmaals, maar dan wel goed: ? header('Content-Type: text/html; charset=UTF-8');

8. 
   Truus
   18.03.08 - 11:52
   8

   Uitleg hoe met cdata te werken vind je hier:
   http://econym.googlepages.com/basic3.htm

9. 
   Harm Hofstede
   30.05.08 - 0:36
   9

   Geweldig hoe je me hier stap voor stap doorheen hebt geloodst.

   In Joomla gaat het allemaal heel eenvoudig, maar ook in SiteAtSchool heb ik nu een keurig overzicht van de locaties van onze school:
   http://pi-school.digitaal-leren.nl/index.php?section=1&category=&page=82

10. 
    maarten
    13.11.08 - 15:04
    10

    Beste Theo,
    Briljante site !!

    Kan je ook nog een artikel toevoegen over het clusteren van markers. Ik heb een kaart met 300 markers en die wil ik graag dmv inzoomen overzichterlijker maken…

11. 
    Theo Bakker
    18.11.08 - 21:53
    11

    Dag Maarten,

    dit zou ik graag doen, maar helaas ontbreekt het me momenteel aan tijd. Ik zal het mijn wish-list zetten.

    Groet, Theo

12. 
    Niloc
    14.05.10 - 12:19
    12

    Beetje oud waarschijnlijk, vooral nu api 3.0 uit is.. maar toch:
    

    <![CDATA[Some stuff to display in theFirst Info Window]]>

    var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);

    zodat je wel cdata kan gebruiken.

13. 
    Niloc
    14.05.10 - 12:20
    13

    argh.. code komt niet goed door.

    maak in de xml een extra element aan genaamd infowindow (kind van marker) en haal via GXml in de js deze value op.

14. 
    Niloc
    14.05.10 - 12:22
    14

    markers clusteren of reageren op zoomevents en andere markers inladen ging 'vroeger' handig via de GMarkerManager.

Jouw reactie

Spelregels voor commentaar

XHTML: Je kunt de volgende HTML code gebruiken: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>