WHELP! geeft advies over ontwerp, bouw en zoekmachine optimalisatie van je website. Ben je hier voor de eerste keer? Start dan bij het 4-stappenplan voor een eigen website.

Google Maps – tekstballonnen (5)

Nu je weet hoe je een marker op een Google Map maakt , is de basis er om een tekstballon toe te voegen aan die plek. Deze tekstballon verschijnt als een bezoeker met zijn muis over de marker gaat en kan gevuld worden met inhoud (tekst en afbeeldingen).

Een tekstballon op je Google Map zetten
Google noemt een tekstballon een InfoWindow. We voegen deze toe met een nieuwe regel code aan het eind van het script:

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        var point = new GLatLng(52.375300, 4.896059);
        map.addControl(new GMapTypeControl());
        map.setCenter(point, 14);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml("Beurs van Berlage");
      }
    }

Het effect is nu:

Google Maps - tekstballon

Google map, met tekstballon

De weergave van de tekst in de ballon kan je met CSS beïnvloeden.

Een tekstballon / InfoWindow tonen bij het aanklikken van de marker
Wat je waarschijnlijk liever wilt is dat een tekstballon pas verschijnt op je kaart als een bezoeker de marker aanklikt. Dit bereik je door het aanroepen van de ballon pas te laten gebeuren, nadat je bezoeker op de marker heeft geklikt. Sluit daarvoor de openInfoWindowHtml() in een methode die 'luistert' of er op de marker geklikt wordt. Dit wordt een eventlistener genoemd:

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        var point = new GLatLng(52.375300, 4.896059);
        map.addControl(new GMapTypeControl());
        map.setCenter(point, 14);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml("Beurs van Berlage");
        });
      }
    }

Google map, met tekstballon afhankelijk van eventlistener.

Extra eigenschap van de tekstballon / InfoWindow: maximize
Het is mogelijk om je tekstballon te voorzien van een 'maximize' adres. Hierdoor verschijnt een maximize icoon. Als je bezoeker hierop klikt ziet hij deze extra pagina. Hiervoor kan je een gewone html pagina maken en deze aan de openInfoWindowHtml() functie toevoegen zoals hieronder:

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        var point = new GLatLng(52.375300, 4.896059);
        map.addControl(new GMapTypeControl());
        map.setCenter(point, 14);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml("Beurs van Berlage",{maxUrl:"details.html"});
        });
      }
    }

Het effect is nu:

Google Map - tekstballon - maximized

Google map, met tekstballon afhankelijk van eventlistener en extra pagina met meer informatie

En hoe nu verder?
De volgende stap is het toevoegen van een routemarkering naar de marker. Meer hierover in het volgende artikel.

Voorbeelden Google Map

 
Vorig artikel in deze serie Volgend artikel in deze serie
Stem / Bookmark [?]Plaatsen/stemmen op NUjijPlaatsen/stemmen op eKudosPlaatsen/stemmen op MSN ReporterPlaatsen/stemmen op DiggVoeg dit artikel toe aan Del.icio.usVoeg toe aan je favorieten op TechnoratiVoeg toe aan je Google bladwijzers

  1. Robbert
    11.05.07 - 15:15
    1

    En hoe werkt het als ik ballonnen bij meerdere markers op de kaart wil plaatsen?


  2. Theo Bakker
    11.05.07 - 16:40
    2

    Hoi Robbert,

    het ligt in mijn bedoeling om dit in een van de volgende artikelen van deze serie nader toe te lichten.

    Groet, Theo


  3. Robbert
    14.05.07 - 10:14
    3

    Ok! ik wacht geduldig af.

    complimenten overigens voor de duidelijke uitleg!


  4. Theo Bakker
    23.05.07 - 13:12
    4

    Zie ook een aanvulling op dit artikel over het direct openen van een maximized infowindow in het commentaar van het volgende artikel in deze serie.


  5. Wouter
    15.12.07 - 22:42
    5

    Is het ook mogelijk op meteen een maximaal venster te open ? Dus zonder dat er op een + button ge klikt moet worden…


  6. Theo Bakker
    16.12.07 - 11:27
    6

    Dag Wouter,

    dit is mogelijk. Zie de documentatie van Google over GInfoWindow en GInfoWindowOptions.

    Groet, Theo


  7. Wouter
    16.12.07 - 14:28
    7

    Hoi Theo,

    IK heb mijn vraag geheel verkeerd gesteld. Wat ik eigenlijk wil bereiken is dat ik iedere marker een eigen url kan geven. Dus als je dan op de marker klikt dat dan bijv, http://www.google.nl word geopend in het zelfde browser scherm.

    Overgens begrijp ik vrij weinig van de google documentatie hoe ik de betreffende functies moet gebruiken….


  8. Wouter
    16.12.07 - 17:28
    8

    Ik heb het inmiddels voor elkaar met addListener().


  9. Richard Dam
    09.02.08 - 10:17
    9

    Hallo,

    Is er ook een mogelijkheid om een link naast de kaart te hebben van een adres en zodra je daarop klikt op de kaart een marker verschijnt met de gegevens van dat adres?
    Groet,
    Richard


  10. Theo Bakker
    07.07.08 - 16:18
    10

    Dag allen,

    Het blijkt dat de code bij dit artikel niet meer helemaal goed werkt, tenzij je de versie van het de Google API instelt als 2.81. Verwijs dus naar http://maps.google.com/maps?file=api&v=2.81.

    Groet, Theo


  11. Sam
    08.07.08 - 12:56
    11

    Hoe krijg ik een NewLine in de tekstballon?

    Ik heb al vanalles opgezocht maar vind de juiste uitleg niet goed.

    Groet, Sam


  12. Theo Bakker
    08.07.08 - 13:24
    12

    Dag Sam,

    dit licht ik toe in mijn laatste artikelen: nr 13 en 14.

    Groet, Theo


  13. Arjan
    08.09.08 - 11:22
    13

    Is het mogelijk om de afgeronde hoeken van de tekstballonnen om te zetten naar rechte hoeken?


  14. Theo Bakker
    09.09.08 - 21:18
    14

    Dag Arjan,

    voor zover ik weet is dat niet mogelijk of heel lastig; zie dit bericht op google groups.


  15. Google Maps - meerdere markers (6)
    30.12.08 - 20:22
    15

    [...] Google Maps – meerdere markers (6) In de vorige aflevering in deze serie heb ik toegelicht hoe je een tekstballon toevoegt aan een Google Map. Wat als je meerdere markers wilt toevoegen (en dus ook meerdere tekstballonnen)? En daartussen een [...]


  16. Roy Prins
    03.03.09 - 23:26
    16

    ter informatie:
    De maxUrl is vervangen door maxContent. Deze optie neemt een (html)string als argument. Zie meer info op code.google.com.


  17. Hermanus
    15.03.09 - 20:14
    17

    Op de site staat al de volgende reacties (9):
    Hallo,
    Is er ook een mogelijkheid om een link naast de kaart te hebben van een adres en zodra je daarop klikt op de kaart een marker verschijnt met de gegevens van dat adres?
    Groet,
    Richard

    Kunt u mij daar aub. antwoord op geven? (Via mail / website).

    Met vriendelijke groet,
    Hermanus


  18. Eduard oudshoorn
    04.06.09 - 0:05
    18

    ik wil een infowindow van een aangepaste marker openen.
    Het lukt dus wel met een standaard marker, maar als ik de markeroptions probeer aan te passen opent de window niet meer.
    Dus dit werkt niet:
    var point = new GLatLng(52.93, 4.777);
    var marker = new GMarker(point);
    map.addOverlay(marker, markeroptions);

    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("Vrijdag 27 juni Vertrek uit Den Helder met noorde wind");
    });


  19. Eduard oudshoorn
    04.06.09 - 22:17
    19

    Nog even als aanvulling.
    Een mooie kleine blauwe marker neerzetten doe ik zo:

    var tinyIcon = new GIcon();
    tinyIcon.image ="http://labs.google.com/ridefinder/images/mm_20_blue.png";
    tinyIcon.shadow ="http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    tinyIcon.iconSize = new GSize(12, 20);
    tinyIcon.shadowSize = new GSize(22, 20);
    tinyIcon.iconAnchor = new GPoint(6, 20);
    tinyIcon.infoWindowAnchor = new GPoint(5, 1);
    markerOptions = { icon:tinyIcon };
    tinyIcon.infoWindowAnchor = new GPoint(9, 2);

    map.addOverlay(new GMarker(new GLatLng(52.93,4.777), markerOptions ));

    maar hoe maak ik je dit voor een OpenWindow ??


  20. Ben Deterink
    31.07.09 - 18:58
    20

    Hallo,

    Heb ik de maxUrl zo goed gewijzigd? Volgens mij moet anders maar ik weet niet hoe.

    marker.openInfoWindowHtml(html,{maxContent:"mappen/woning_3.php"})

    Groeten,
    Ben


  21. Peter Kannekens
    03.08.09 - 15:17
    21

    Voor een website heb ik het script gebruikt waarmee je de tekstballon kan vergroten (maximize).

    Nu werkte dit script altijd goed, maar sinds kort werkt dit niet meer. Nu ben ik wat gaan rondneuzen, maar ik kan niks vinden. in het voorbeeld (12) doet hij het ook niet meer.

    Iemand suggesties voor dit probleem??

    Alvast bedankt,
    Peter


  22. Frans
    14.09.09 - 12:35
    22

    Wie kan me verder helpen met het volgende:
    In Google Maps – tekstballonnen (5) is als voorbeeld een tekstballon met foto gepresenteerd. Ik krijg er alleen maar tekst in en géén foto.
    Wie kan me verder helpen met een complete tekstballon (tekst, foto en verwijzing naar url)
    dank u

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>

Domeinnaam vrij?

  • Test via Byte op .nl, .eu, .be, .com, .net, .org, .biz, .info, .de, .co.uk, .tv, .nu, .cn en .name
Quick Index
Over