Google Maps – verschillende iconen voor markers (17)
Een aantal van jullie heeft me gevraagd of het mogelijk is om verschillende iconen te gebruiken voor je markers. Dit kan! In deze tutorial leg ik je uit hoe je dit kan meegeven in je xml bestand.
Voorkennis
Ik ga ervan uit dat je op de hoogte bent van voorgaande tutorials over Google Maps.
Hoe gaan we verschillende iconen op de kaart zetten?
Wat we doen is dat we het aanmaken van een icoon gaan onderbrengen in een nieuwe functie: getIcon(). Deze functie gaan we voorzien van de afbeelding die we willen gebruiken. De naam van de afbeelding gaan we opnemen in het xml bestand dat de data bevat van een marker.
Het eindresultaat zal er zo uit gaan zien:
1) Iconen aanmaken
Eerst maken we twee nieuwe iconen aan. Ik heb er een van Anne Frank en een van Berlage gemaakt. Ik zorg ervoor dat ze allebei even groot zijn: 23 x 24 pixels. Je kunt voor een groter formaat kiezen, maar let er dan wel op dat je de juiste maten opneemt in je script.
2) Data.xml aanpassen
Het data.xml bestand passen we hierna zo aan dat elke marker een extra gegeven meekrijgt over de afbeelding die we willen gebruiken, het attribuut 'iconimg'. De naam voor dit attribuut kan je overigens helemaal zelf bedenken.
<markers>
<marker address="Prinsengracht 267, Amsterdam" label="Anne Frank Huis" iconimg="annefrank.png">
<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" img="berlage.png">
<infowindow><![CDATA[<b>Beurs van Berlage</b><br/>De Beurs van Berlage is vernoemd naar de architect Berlage.]]></infowindow>
</marker>
</markers>
3) Een nieuwe functie maken om een icon te maken
In het vorige maps.js bestand hadden we een paar regels waarin het icoon werd geregeld:
var icon = new GIcon();
icon.image = "http://www.whelp.nl/googlemaps/images/whelp_small.png";
icon.iconSize = new GSize(24, 23);
icon.iconAnchor = new GPoint(0, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
Deze regels halen we weg. In plaats daarvan zet ik onderaan het bestand een nieuwe functie:
function getIcon(iconimg){
icon = new GIcon();
icon.image = "http://www.whelp.nl/googlemaps/images/"+iconimg;
icon.iconSize = new GSize(24, 23);
icon.iconAnchor = new GPoint(0, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
return icon;
}
Zoals je kunt zien lijkt dit erg op elkaar, met maar twee verschillen: a) we geven via een variabele door wat het plaatje wordt (iconimg) en b) we sluiten af met 'return icon'. Hiermee geef je dat wat je hebt opgebouwd terug aan de plek waar je de functie aanroept.
4) De functie getIcon() aanroepen
In de loop over de markers vervangen we het volgende:
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
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");
icon = getIcon(markers[i].getAttribute("iconimg"));
showAddress(map,geocoder,address,html,label,icon);
} //close for loop
We voegen dus een regel toe waarin de functie getIcon() wordt aangeroepen en de waarde die in het attribuut iconimg staat wordt doorgegeven. Dat is alles.
Het eindresultaat
Zie de Google Map met verschillende iconen.
Tip
Werk je met verschillende categorieën? Overweeg dan gebruik te maken van een switch op de categorie. Stel je wilt op basis van het aantal sterren van een hotel verschillende iconen laten zien, dan kan het volgende doen:
function getIcon(sterren){
icon = new GIcon();
switch (sterren) {
case "1":
iconimg = "icon_01";
break;
case "2":
iconimg = "icon_02";
break;
case "3":
iconimg = "icon_03";
break;
case "4":
iconimg = "icon_04";
break;
case "5":
iconimg = "icon_04";
break;
default:
iconimg = "icon_03";
break;
}
icon.image = "http://www.test.nl/images/ster_"+iconimg+".png"
icon.iconSize = new GSize(35, 35);
icon.iconAnchor = new GPoint(0, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
return icon;
}
Met dank aan
Nourdeen Wildeman, die als eerste deze vraag stelde. Zie voor het resultaat http://www.moskeewijzer.nl.
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)
Arjan
18.12.08 - 13:05
De interface van Google Maps is veranderd, zie de kaart op maps.google.com. Kunnen we die nieuwe interface ook combineren met jouw code, bijv. door het versienummer van de api aan te passen? Of zijn er ingewikkeldere wijzigingen nodig?
Arjan
Theo Bakker
21.12.08 - 15:18
Dag Arjan,
dank voor je tip. Het is allemaal erg in beweging. Ik ben daarom begonnen met een nieuwe serie. Daarin zal ik tezijnertijd op je vraag terugkomen (het is nl wat complexer dan het op het eerste oog lijkt).
Groet, Theo
Arie
26.11.09 - 14:59
Hallo Theo, Bedankt voor deze extra pagina.
Heb volgens mij alles goed verwerkt, maar op mijn map komen toch gewoon de rode markers.
Enig idee wat ik fout doe?
(jammer dat ik mijn maps.js niet kan meesturen)
Groet,
Arie
Arie
06.12.09 - 15:14
Hallo Theo,
Het is me gelukt hoor verschillende markers!
Waar ik nu tegen aan loop is dat als mijn lijst in data.xml langer is dan 10 adressen hij errors geeft dat hij het adres niet kan vinden. Enig idee hoe ik dit kan oplossen?
Groeten,
Arie