Google Maps op je contactpagina – inzoomen (2)
In het vorige artikel over de basis van een Google Map heb ik uitgelegd hoe je een Google Map op bijvoorbeeld je contactpagina toont. In dit artikel meer over inzoomen.
Waar waren we gebleven?
In het vorige artikel hadden we een basiskaart van de Beurs van Berlage gemaakt die er alsvolgt uitziet:
Inzoomen
Je kunt op twee manieren inzoomen op een kaart: 1) met een inzoom-element (dan bepaalt de bezoeker dat hij wil inzoomen) of 2) door zelf in te zoomen.
1) inzoom-element
Voeg voor een inzoom-element 1 regel toe aan de load() functie uit het vorige artikel:
De functie wordt nu:
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
De regel map.addControl(new GSmallMapControl()); zorgt ervoor dat je de kaart verrijkt met een inzoom-element. Als een bezoeker inzoomt komt hij steeds dichter bij de Beurs van Berlage.
Het effect is nu:
2) zelf inzoomen
Dit is heel eenvoudig. Vervang het getal 13 uit map.setCenter() in de code door een hoger getal. Dit getal heet de z-waarde van de kaart. Ik heb er nu 14 van gemaakt.
De functie wordt nu:
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 14);
}
}
//]]>
</script>
Het effect is nu:
En natuurlijk kan je deze twee mogelijkheden ook combineren.
Dat je met deze z-waarde heel wat kunt doen kun je lezen op lifehacker.com, waarbij op een kameel in de woestijn wordt ingezoomd.
En nu verder
In het volgende artikel in deze serie meer over overlays: het toevoegen van de werkelijke omgeving op de kaart!
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)
coen
04.05.09 - 11:25
zeer mooie tutorial met goede uitleg.
Erg bedankt hiervoor.
Angela Steevens
13.10.09 - 9:22
Is het ook mogelijk om het zoomen uit te zetten? Dus dat je als webmaster een bepaalde zoomstand meegeeft, bijvoorbeeld 14 en dat dan niet wordt ingezoomd wanneer je met je muis over het vlak 'rolt'?
Bedankt, Angela