Google Maps – hyperlinks naar markers naast je kaart (13)
Als je een Google Map hebt gemaakt met markers, is het misschien handig om naast je kaart een lijst te laten zien van de adressen op je kaart. Hoe je dit doet leg ik in dit artikel uit.
1. De body van je kaart aanpassen
Stap 1 is de body van je kaart zo aan te passen dat je in de volgende stap de markers kwijt kunt.
<div>
<div id="map" style="width: 500px; height: 300px; float:left"></div>
<div id="side_bar" style="width: 500px; height: 20px; float:left; margin-left: 1em;"></div>
<div>
</body>
De side_bar is nieuw. Hierbinnen gaan we in de volgende stap de lijst van markers toevoegen.
2. Een lijst van markers naast je kaart
In het vorige artikel heb ik uitgelegd hoe je vanuit een XML bestand je markers op een Google Map zet. Hetzelfde bestand kan je gebruiken om naast je kaart een overzichtslijst te tonen. Het resultaat zie er dan als volgt uit (detail):
Eerst verklaren we een aantal variabelen aan het begin van ons bestaande document (maps.js):
var address;
var geocoder;
var gmarkers = [];
var html;
var htmls =[];
var i = 0;
var icon;
var label;
var map;
var marker;
var markers;
var randomnumber;
var side_bar_html = "";
var xml;
Dit stelt ons in staat om deze door onze functies heen beter te voorzien van gegevens. Vervolgens breiden we de functie die de markers maakt (createMarker) uit met informatie voor het nieuwe element in de pagina – de side_bar.
function createMarker(point,html,label,icon){
var marker = new GMarker(point,icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + label + '</a><br>';
document.getElementById("side_bar").innerHTML = side_bar_html;
i++;
return marker;
}
Doordat deze functie bij elke marker wordt aangeroepen, vullen we zo de gmarkers array en de htmls array. Die gebruiken we daarna om de side_bar_html te vullen met linkjes. De functie is zo geschreven dat de HTML bij iedere marker uitgebreid wordt. Vervolgens voegen we de side_bar_html weer toe binnen het nieuwe side_bar gedeelte.
3. Een klik koppelen aan de kaart
Tot slot moeten we nu nog een klik op een linkje uit de lijst koppelen aan een element in de kaart; in het voorbeeld hierboven wordt hiervoor myclick() al aangeroepen. Voeg nu de functie myclick() toe aan maps.js.
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
De trigger functie werkt als een signaal naar de kaart dat de bijbehorende informatie getoond wordt.
Tot slot
Aangezien er nog een paar andere wijzigingen zijn doorgevoerd in maps.js adviseer ik je deze nieuwe versie in zijn geheel over te nemen.
Dit geldt ook voor het nieuwe xml document.
De wijzigingen hierop zal ik in het volgende artikel nader toelichten.
Het eindresultaat
Als je alles goed hebt overgenomen, bekijk dan je eindresultaat.
Bronvermelding
De basiscode voor dit artikel heb ik gevonden in diverse fora over Google maps.
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)
PageMaker
15.09.08 - 15:08
Nou, die populariteit en de bekendheid moeten maar eens veel hoger.
Deze site is voor een beginner (zoals ik) werkelijk een goudmijn!
Aanrader!
Theo Bakker
15.09.08 - 16:26
Dag PageMaker,
dank voor je compliment. Overigens, aan bezoekers geen gebrek, maar het mogen er altijd meer worden ;-)
Groet, Theo
Martijn
23.09.08 - 21:58
geweldige serie inderdaad! Dit is precies wat ik nodig had icm mijn jquery eperimenten. (en ik had al 2 dagen lopen zoeken!)
Thanks!
Aartjan
08.02.09 - 14:28
Een hele domme beginnersvraag waarschijnlijk, maar in het document maps.js wordt gelinkt naar javascript. Ik vrees dat ik dat niet op mijn site heb staan. Hoe los ik dat op. Er verschijnt nu nl. geen kaart meer op mijn schrerm.
<a href="myclick(’ + i + ‘)" rel="nofollow">’ + label + ‘</a>Aartjan
Theo Bakker
09.02.09 - 8:10
Dag Aartjan,
bedoel je het bestand waarnaar het verwijst?
Groet, Theo
Aartjan
12.02.09 - 15:25
Inderdaad, echter in mijn reactie is de naam van het bestand weggevallen. Staat in de volgende regel van het script:
side_bar_html += '' + label + '';
Aartjan
Michael
14.09.09 - 15:06
Beste Theo,
Om de een of andere reden heb ik als ik de bovenstaand tut afmaak alleen een grijs scherm met zoom functie en Google logo.
De verwijzingen naar data.xml en maps.js heb ik aangepast en kloppen.
Ik draai op een localhost met een Wamp.
De eerste tut doen het gewoon wel. dus de google KEY is goed.
Wat doe ik toch niet goed?
Alvast bedankt.
Michael
Aad
26.11.09 - 13:38
Hoi, dank voor de fraaie artikelen! Ik heb er veel aan gehad en de kaart en de tekstballon lukken prima nu maar nu zou ik graag meerdere regels in de tekstballon willen zetten. Ik heb wat af gegoogled maar kom er niet ……
:(
Aad
Jules
30.03.10 - 23:26
Goede tutorial inderdaad, maar je gaat alleen lopen met de eer van een andere. Dit is namelijk een precieze kopie van de tutorial op http://econym.org.uk/gmap/
Alleen is het vertaald naar het Nederlands. Alle variables en function namen zijn exact hetzelfde. Dus je mag op zijn minst zijn naam vermelden als originele author.