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 route wilt plannen?
Meerdere markers toevoegen aan je Google Map
In het voorbeeld dat ik tot nu toe gebruikt heb (de Beurs van Berlage) is het misschien handig om vanaf de Beurs naar het Anne Frank Huis te kunnen lopen. We hebben dus twee markers nodig: 1 bij de Beurs en 1 bij het Anne Frank Huis. Je wilt onderstaande resultaat. Hoe doe je dit?
Een XML bestand inladen met coördinaten in je Google Map
Er zijn verschillende manieren om coördinaten in te laden, maar ik kies ervoor dit met een xml bestand te doen. Het voordeel daarvan is dat je de inhoud van je kaart kunt scheiden van de code waarmee je de kaart opbouwt. Hierdoor is het beheer van je kaart eenvoudiger. De aanpassing van de code is alsvolgt:
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
GDownloadUrl("xml/13/data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.setCenter(point, 14);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
);
}
}
1) GDownloadUrl() toevoegen Om een xml bestand in te laden moet je de functie GDownloadUrl() gebruiken. In dit voorbeeld laad ik xml/13/data.xml in. Dit bestand ziet er alsvolgt uit:
<markers>
<marker lat="52.375066" lng="4.883756" />
<marker lat="52.375300" lng="4.896059" />
</markers>
Vul per regel een locatie in. De coördinaten van het Anne Frank huis heb ik opgezocht (zie mijn artikel over de basis van Google Maps).
2) Loop over de markers
Wat nieuw is, is dat je de waardes voor de point variabele uit het XML document haalt en deze eerst in een array bewaart: var markers.
Daarna loop je over dit array (met de for loop) op de manier zoals boven beschreven. Je kunt zien dat je zo de attributen "lat" en "lng" gebruikt uit het XML bestand en toewijst aan nieuwe markers.
NB Door het laatste element in je XML document de Beurs van Berlage te laten zijn zorg je ervoor dat je kaart daarop centreert. Dat kan beter, maar voor nu werkt het.
Problemen
Als dit niet werkt, dan ligt het meestal aan een } of een ) die je bent vergeten!
En hoe nu verder?
De volgende stap is per marker een eigen tekstballon te maken. Hierover meer in het volgende artikel in deze serie.
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)
Marco
17.05.07 - 19:38
Hallo Theo,
Interessant artikel! Ik hoop dat je er verder mee gaat…
Ik ben dan wel benieuwd of je de inhoud van de tekstballon ook uit de xml file haalt en of je eigen icoontjes kunt toevoegen als marker.
Groet,
Marco
Theo Bakker
18.05.07 - 9:24
Hoi Marco,
dat ben ik zeker van plan!
Groet, Theo
Ger
23.05.07 - 11:03
Theo,
dank voor je prima uitleg.
Ga vooral door. Er is nog genoeg wat we van je kunnen leren.
Is het ook mogelijk om bij het aanclicken van een marker direct het infowindow te laten zien met zo'n foto en uitleg? Het standaard markerschermpje zegt niet zoveel.
Het is ook behoorlijk groot voor alleen maar een regeltje tekst. (marker naam)
Theo Bakker
23.05.07 - 13:09
Dag Ger,
dit kan inderdaad, maar is niet zo eenvoudig. Ik heb twee voorbeelden voor je gemaakt:
1) Google map met maximized openen onclick
2) Google map met direct maximized openen – niet zo mooi; nogal schokkerig.
De truc is de map op te slaan in een nieuw object (mymap) en een timeout te gebruiken, anders werkt dit niet.
Kijk even in de broncode van de documenten hierboven om te zien hoe ik dit gemaakt heb.
Overigens, dank voor je compliment.
Groet, Theo
Pascal
05.07.07 - 10:43
Mooie uitleg. Alleen ik blijf de kaart van Amsterdam zien. Ook als ik de latitude, en longitude van Almere invul. Waar kan ik dit aanpassen?
Theo Bakker
27.07.07 - 18:37
Dag Pascal,
De data die je invult in data.xml moet voldoende zijn om de nieuwe lengte- en breedtegraad te wijzigen. Het kan echter zijn dat de map wordt ingeladen vanuit de cache van de browser. Om dit te voorkomen moet je een willekeurig nummer meegeven aan het GDownloadUrl commando. Dit heb ik nader toegelicht in het volgende artikel.
Met behulp van de Firebug plugin voor Firefox kun je goed zien of je browser een nieuwe versie van je xml bestand inleest.
Groet, Theo
Alex
30.07.07 - 15:01
Beste Theo,
Goede uitleg en een waardevolle toevoeging op de, in mijn ogen, gebrekkige API van Google.
Iets wat mij opvalt is dat de schaduw van de InfoWindow in IE voor nogal wat haperingen zorgt. Heb jij enige idee hoe die uit te schakelen is?
Ik ben erg benieuwd of je de vraag kunt beantwoorden en uiteraard naar meer voorbeelden.
groet,
Alex
Theo Bakker
30.07.07 - 21:22
Dag Alex,
ik heb gegeken in IE 6.0 maar zie daar geen rare dingen. Wat bedoel je precies?
Groet, Theo
Alex
31.07.07 - 10:43
Beste Theo,
wat ik bedoel te zeggen; is wanneer een tekstballon geopend is de schermnavigatie vertraagd.
Ofwel, als de tekstballonen open zijn dan kan ik minder snel navigeren over de kaart omdat het beeld 'stottert'.
Mijns inziens heeft dit te maken met de shaduw achter de tekstballonnen.
Het normale navigeren, zonder tekstballonnen, gaat dan ook bijzonder vloeiend op een dualcore pc'tje ;).
Theo Bakker
01.08.07 - 10:27
Hoi Alex,
aha. Voor zover ik weet is de schaduw is een transparante layer. Ik zie dat jij IE 7.0 gebruikt. Ik vermoed dat het probleem meer te maken heeft met problemen van IE 7.0 met opacity / transparantie. Helaas heb ik verder hierover niet veel kunnen vinden. Zelf gebruik ik IE 7.0 nog niet… dus ik ben bang dat ik niet echt verder kan helpen.
Iemand anders?
Groet, Theo
André
04.01.08 - 17:26
Beste Theo,
Allereerst bedankt voor goede uitleg van google maps,
ik heb er veel aangehad. Ik ben flink aan het testen met een groot aantal markers. Is er bij jou iets bekent van een teveel aantal map-request, waardoor alleen de eerste 10 markers maar op de kaart gezet worden?
Hartelijke groet,
André.
Theo Bakker
04.01.08 - 18:43
Dag Andre,
ik heb van meerdere personen dit probleem te horen gekregen, maar ben helaas nog niet zelf achter een oplossing.
Groet, Theo
Roy de Kleijn
16.01.08 - 12:22
Beste Theo,
Mooie manier om meerdere markers te plaatsen.
Ik heb nu zelf ongeveer 100 markers geplaatst. Mijn vraag is nu, kan je de map laten openen zodat je nederland zien?
Volgens mij wordt er nu gecentreerd op het laaste adres in het XML bestand.
Hopende op een spoedige reactie,
Roy de Kleijn
Theo Bakker
18.01.08 - 22:42
Dag Roy,
probeer het volgende: geocoder.setBaseCountryCode('NL');
Groet, Theo
Jan Moek
24.02.08 - 6:26
He Theo, allemaal top artikels. Voor mij zeer waardevol
Maar toch nog een vraag
Ik krijg nu vanuit mijn database meerdere markers in mijn map, (geplaatst ahv adres, niet ahv coords)
maar zodra ik er meer als 10 markers/icons wil laten tonen kan hij mijn adressen niet meer vinden.
zit er een limiet aan het te gebruiken aantal markers/icons?
Agnes Jansen
11.06.08 - 16:56
Beste Theo,
Vandaag heb ik met behulp van jouw uitstekende handleiding een kaart gemaakt met meerdere markers. Het boven al beschreven probleem doet zich voor: niet alle (11) markers worden getoond, en ook de plek is niet altijd in orde. Ik heb de indruk dat de laatst ingevoerde marker op de plaats staat van de maximale capaciteit voor vertoningen. Ik bedoel, de laatst ingevoerde marker staat op de coordinaten van de negende. Heb je hier al een oplossing voor gevonden? Mijn kaart staat op: http://biocoop.ro/biomap.php
het xml bestand is http://biocoop.ro/mapdata1.xml
vriendelijke groet, Agnes Jansen
Theo Bakker
05.07.08 - 9:50
Even voor iedereen – als je een leeg scherm krijgt in plaats van je kaart, kijk dan even naar je xml bestand. Grote kans dat je een tab hebt staan voor het basiselement markers.
Groet, Theo
Nourdeen Wildeman
19.10.08 - 11:03
Beste Theo Bakker,
Enorm bedankt voor alle informatie op je site. Ik ben bezig met het maken van een website mar 450 markers en zonder jouw hulp had me dat wel heel veel frustraties opgeleverd. Stap-voor-stap je artikelen lezen helpt enorm!
Mijn vraag:
Je schrijft "Door het laatste element in je XML document de Beurs van Berlage te laten zijn zorg je ervoor dat je kaart daarop centreert. Dat kan beter, maar voor nu werkt het."
Hoe kan ik zelf instellen op welke gps-locatie en welke hoogte de kaart moet centreren. De eerdere map.setCenter-code in load() lijkt niet te werken.
Bij voorbaat bedankt voor je antwoord; je krijgt een mooi linkje op de site als het af is.
Met vriendelijke groet, Nourdeen Wildeman
Sjoerd van Mil
31.10.08 - 15:31
Beste Theo,
Je artikelen over Google maps API zijn top!. Al heb ik hier en daar wat probleempjes ondervonden met het opbouwen van hetscript. Dit is inmiddels opgelost en heb nu een mooie werkende kaart met meerdere markers.
Zoals je al hebt aangegeven wordt de kaart gecentreerd op het laatste coördinaat opgegeven in de xml-file. Hierdoor zullen bepaalde markers wel of niet binnen de kaart vallen. Om na aanvulling zelf steeds het centerpunt te wijzigen vind ik ook niet handig. Iets wat eigenlijk heel makkelijk kan.
Graag zou ik de map automatisch laten centreren op een centraal punt tussen de markers. Zelf had ik het volgende bedacht om in te voegen in de if loop van de load functie zodat elke keer dat de loop loopt de grootste en kleinste x en y wordt onthouden.
var max_x;
var max_y;
var min_x;
var min_y;
if (lat >=max_x){max_x=lat};
if (lng >=max_y){max_y=lng};
if (lat <=min_x){min_x=lat};
if (lng <=min_y){min_y=lng};
var center_x = ((max_x-min_x)/2)+min_x;
var center_y =((max_y-min_y)/2)+min_y;
var cpoint = new GLatLng(center_x, center_y);
map.setCenter(cpoint, 16, G_SATELLITE_MAP);
Het probleem hiermee is dat ik een grijsvlak krijg. vermoedelijk omdat er geen coördinaat wordt gevormd.
Weet iemand hier een oplossing voor en wat is het probleem met het boven staande?
Met vriendelijke groet,
Sjoerd van Mil
Theo Bakker
02.11.08 - 13:39
Dag Sjoerd,
dit klinkt als een interessante oplossing waar meer mensen om verlegen zijn. Kan je me je code eventueel toesturen? Dan kan ik er beter naar kijken: theo@whelp.nl.
Groet, Theo
Bart
30.12.08 - 19:51
Dag Theo,
Ik denk dat het stukje code:
map.addControl(new GMapTypeControl());
Niet in de for loop mag zitten want dan wordt deze code telkens uitgevoerd bij het plaatsen van een marker. Op zich geen probleem, want de controls komen gewoon bovenop elkaar, maar als je de DOM tree bekijkt zal je zien dat de controls er meerdere malen inzitten. Lijkt me niet zo performant.
Theo Bakker
30.12.08 - 20:18
Dag Bart,
inderdaad. Dat is daarin geslopen. Bedankt voor je opmerkzaamheid. Ik zal het aanpassen.
Groet, Theo
Reint Jan Hoiting
22.01.09 - 12:49
Ey Theo,
Om te beginnen heel heel veel dank voor je super uit leg.
ik ben al een heel end gekomen,
ik heb alleen nog een vraag waar ik geen antwoord op kon vinden in je 17 topics,
je geeft aan in de basis dat je de kaart kan centreren. op en bepaalde punt. maar als ik jouwn java script gebruik kan centreerd hij zich zelf op de ingevulde adress in mijn xml script. is er enige mogelijkheid dat hij gewoon op het oude punt blijft centreren.
ik heb even en voorbeeld je toegevoegd voor als mn uitleg niet clear was:
http://paintballcenter.nl/site/gmaps/googlemaps-13.htm
wat ik bedoel ik heb hem gecentered op amsterdam maar op het moment dat hij de markers load dan centered hij de map op die markers.
ik denk dat dit en simple oplossing heeft, alleen ik kon er zelf niet achter komen.
mopelijk kan iemand er mee helpen
vmg,
Reint Jan
Reint Jan Hoiting
22.01.09 - 20:43
Resolved!
Heb het al opgelost:
Oplossing voor als iemand het wil weten:
delete line 52 : map.setCenter(point, 14);
als nog veel veel dank naar theo.
Gr,
Reint Jan
matteo
12.02.09 - 10:39
hallo, ik ben via jou instructies begonnen aan het plaatsen van google maps op mijn website, maar bij meerdere markers plaatsen kreeg ik steeds fout op de pagina. Nu ben ik via Google maps, mijn kaarten, hetzelfde aan het doen en het is erg simpel. aanklikken en plaatsen. Via link kan je dan eenvoudig de code voor je website copieeren. Is er een nadeel aan deze manier omdat het nergens besproken wordt?
bedankt voor je reactie.
Theo Bakker
23.02.09 - 22:04
@Reint Jan,
bedankt!
@Matteo,
het nadeel is dat die methode zich niet leent om te gebruiken bij het automatisch aanmaken van je kaart uit bijvoorbeeld een database.
Groet, Theo
Rik Willems
14.03.09 - 16:56
Beste Theo,
Bedankt voor je reeks artikelen over Google Maps API. Werkt als een zonnetje. Wellicht nog een verbetering. Je geeft aan dat vooralsnog de laatste entry in de xml file de mapCenter wordt. Als je de for statement aanpast zou het de eerste moeten zijn:
for (var i = 0; i 0; i–) {
Hopelijk heb je er iets aan.
Groeten,
Rik
Dirk
07.05.09 - 13:11
Dag Theo,
is het ook mogelijk om meerdere soorten markers te plaatsen in de Map. Dus bv een rode en een groene? Alvast bedankt voor de duidelijke uitleg.
Alwin
31.05.09 - 9:20
Dag Theo,
Allereerst dank voor de interessante stukjes code en uitleg.
Klopt het dat wanneer ik via xml meerdere markers op de kaart wil zetten, het aantal gelimiteerd is tot 10? Bij de 11e entry krijg ik namelijk een javascript error: "niet gevonden" door if (!point) {…}. De for loop lijkt echter wel okee
for (var i = 0; i < markers.length; i++)
Groeten, Alwin
Jurgen
03.06.09 - 18:31
Hoi Theo,
Ik loop tegen dezelfde uitdaging aan als Alwin. Bij de elfde entry krijk ik de melding dat plaats xyz niet kan worden gevonden.
Enig idee?
Groet,
Jurgen
Patrick
21.06.09 - 22:26
bij mij werkt het niet in internet explore?
Arno
25.07.09 - 23:59
Kan iemand mij een voorbeeld sturen van het complete werkende script? Ik krijg de markers de map maar niet gecentreerd. Ik blijf een grijs vlak houden.
FireFox zegt dat max_x is not defined..
Geen idee meer wat ik moet doen :-(
Jeffreyvand
07.09.09 - 7:38
Ik heb hetzelfde probleem als Arno… hopelijk komt hier snel een oplossing voor
Dit is pas bij de stap dat ik de punten in een xml zet hiervoor werkte het gewoon
(ik gebruik IE 8.0 )
Vincent
02.02.10 - 15:19
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