Google Maps – Een overzichtskaart toevoegen (16)
Stel je laat een kaart zien, maar je wilt bezoekers ook de gelegenheid geven om verder te navigeren romdom deze kaart. Hoe voeg je dan een overzichtskaart toe? Het antwoord is eenvoudig: gebruik het GOverviewMapControl.
De GOverviewMapControl toevoegen
In de code van de vorige tutorials (lees deze eerst…) voegen we hiervoor maar 1 regel toe in de load() functie:
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();
var mini = new GOverviewMapControl(new GSize(100,100));
//add controls
map.addControl(new GMapTypeControl());
map.addControl(mini);
…
Hoe werkt het?
Zet eerst het nieuwe element in een variabele: mini. Dit is handig omdat je er dan later nog wat extra's mee kan doen (zie later in dit bericht). Via de map.addControl functie geef je aan dat je een extra element op je kaart wilt zetten, nl. een overzichtskaartje (GOverviewMapControl). Daarbinnen geef je aan welk formaat die moet hebben. In het voorbeeld is het 100 x 100 pixels. De rest van de functie blijft onveranderd. Het effect ziet er zo uit:
Het kleine blauwe hoekje geeft aan welk gebied actief is in de overzichtskaart. Een bezoeker kan met zijn/haar muis dit verslepen en ziet hiermee de rest van de kaart.
Live demo
Bekijk een live demo van deze Google Maps overzichtkaart.
De overzichtskaart standaard verbergen
Stel nu, je wilt het overzichtskaartje niet direct laten zien. Gebruik dan de volgende code.
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();
var mini = new GOverviewMapControl(new GSize(100,100));
//add controls
map.addControl(new GMapTypeControl());
map.addControl(mini);
mini.hide();
…
De overzichtskaart is nu standaard ingeklapt en verschijnt als de bezoeker in rechterhoek onderaan klikt.
Live demo
Bekijk een live demo van deze Google Maps overzichtkaart (standaard verborgen).
Met dank aan…
Arjan Droger die mij vroeg naar deze mogelijkheid.
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)
Jeroen
02.10.08 - 14:59
Super tutorial! +10
Heb hier veel aan gehad, één opmerking, je moet hem wel van begin af aan volgen om tot een eindresultaat te komen. Maar goed, hierdoor begrijp ik nu wel de opbouw.
Theo Bakker
02.10.08 - 17:14
Hoi Jeroen,
dank voor je compliment! Het is inderdaad een hele serie aan het worden waarop ik voortborduur.
Groet, Theo
Marc
29.10.08 - 11:00
Mooie tutorial. Ik heb ze bijna allemaal gebruikt voor een kaart op mijn website. Echter zit ik nog met het probleem van de niet gevonden adressen bij het geocoden. Is er al duidelijk waar het probleem zit en wat de oplossing zou kunnen zijn?
Theo Bakker
29.10.08 - 22:33
Hoi Marc,
Nee helaas niet. Ik heb besloten het even te laten aangezien ik vermoed dat het inladen beter met JSON gedaan kan worden of een andere techniek. Ik heb alleen nog geen tijd gehad om hier wat over te schrijven…
Groet, Theo
martijn
08.11.08 - 14:08
HI Theo,
Geweldige site. Wat een opties met google-maps. Ik ben blij met je uitleg. Mijn vragen:
- kan ik hiermee ook bv 10000 adressen zichtbaar maken
verdeeld in zeg 4 groepen met elk een eigen marker?
- kun je mij aangeven hoe ik met verschillende markers moet omgaan?
- kan ik het soort marker dan aangeven in de xml-file?
- kan ik bij inzoomen het aantal markers wat zichtbaar wordt laten opvoeren. Stel ik heb 2000 adressen in 1 stad. Dan lijkt mij eea niet meer leesbaar door alle markers. Op zo'n moment zou ik ikgraag willen beinvloeden hoeveel markers je ziet. Is dat mogelijk?
Thx.
;)
Martijn
Theo Bakker
10.11.08 - 21:11
Dag Martijn,
Bedankt voor je compliment. Je vraagt nogal wat – ik ga het stuk voor stuk even af.
- 10000 adressen – nee, hiervoor is XML niet geschikt. Gebruik hiervoor methodieken met JSON. Maar dan nog zijn dat er wel te veel.
- verschillende markers / soort marker -hiervoor is een artikel in de maak. Het komt er kort op neer dat je in je xml een parameter meegeeft die aangeeft welke marker gebruikt moet worden. Kijk voor een werkend voorbeeld op http://www.moskeewijzer.nl.
- inzoomen – een interessant idee. Ik vermoed dat dit kan, maar weet dat niet zeker… mocht ik hier meer over vinden, dan meld ik me weer.
Groet, Theo