Inleiding
Ik ga het in deze tutorial hebben over het toevoegen van een Google-Maps kaart op je website. Ik zal wat korte dingen behandelen die je kan doen met zo’n kaart, zoals markers toevoegen, inzoomen, bewegen, informatie popupjes laten zien etc..
Om de Google Maps API te mogen gebruiken heb je een code nodig. Daarmee kan je 50.000 aanvragen per dag doen, dus elke 1,7 seconde één. Om een API key aan te vragen moet je hier zijn.
Kaartje plaatsen
Laten we eerst maar eens gewoon een kaartje plaatsen op de website, en deze centreren op mijn huis. Ik heb geprobeerd zo duidelijk mogelijk commentaar bij de code te geven.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Spelen met Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=hier_de_api_key" mce_src="http://maps.google.com/maps?file=api&v=2&key=hier_de_api_key" type="text/javascript"></script> <!-- Standaard javascript --> <script type="text/javascript">
//<![CDATA[
function load() { // Deze functie wordt aangeroepen als de pagina laadt
if (GBrowserIsCompatible()) { // Als de browser google maps aankan..
var map = new GMap2(document.getElementById("map")); // Een nieuw 'map'-object maken
map.setCenter(new GLatLng(52.045974, 5.634251), 13); // het huidige midden instellen, en het zoom niveau
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 600px; height: 600px"></div> <!-- De div waar de kaart in komt -->
</body>
</html>
Controls toevoegen
Zo. Nu hebben we een kale kaart, die je mbv je muis van positie kunt veranderen. Inzoomen kan helaas nog niet, en wisselen van kaarttype (satteliet, landkaart of beide) ook nog niet. Maar daar gaan we nu verandering in brengen.
Met de volgende code voeg je een ‘groot’ zoom control toe aan de kaart, en een control dat het mogelijk maakt te wisselen van kaarttype.
Code:
function load() { // Deze functie wordt aangeroepen als de pagina laadt
if (GBrowserIsCompatible()) { // Als de browser google maps aankan..
var map = new GMap2(document.getElementById("map")); // Een nieuw 'map'-object maken map.setCenter(new GLatLng(52.045974, 5.634251), 13); // het huidige midden instellen, en het zoom niveau
map.addControl(new GLargeMapControl()); // Groot zoom/beweeg control
map.addControl(new GMapTypeControl()); // Control voor wisselen van kaarttype
}
}
Alle controls even op een rijtje die je toe kunt voegen:
- GSmallMapControl Klein zoom/beweeg control. Zonder 'zoom-slider'.
- GLargeMapControl Groot zoom/beweeg control. Met 'zoom-slider'.
- GSmallZoomControl Klein zoom control. Zonder 'zoom-slider' en zonder beweegmogelijkheden.
- GScaleControl Een control dat de schaal laat zien van de huidige kaart.
- GMapTypeControl Control dat het mogelijk maakt te wisselen tussen kaarttypes.
Bewegen en inzoomen
Om de kaart uit code te bewegen en in te zoomen heb je de volgende functies van het map object nodig: panTo() en setZoom().
Voorbeeld:
Code:
function load() { // Deze functie wordt aangeroepen als de pagina laadt
if (GBrowserIsCompatible()) { // Als de browser google maps aankan..
var map = new GMap2(document.getElementById("map")); // Een nieuw 'map'-object maken map.setCenter(new GLatLng(52.045974, 5.634251), 13); // het huidige midden instellen, en het zoom niveau
map.addControl(new GLargeMapControl()); // Groot zoom/beweeg control
map.addControl(new GMapTypeControl()); // Control voor wisselen van kaarttype
map.panTo(new GLatLng(53.045974, 5.634251)); // Beweeg naar opgegeven coördinaten
map.setZoom(7); // Beweeg naar opgegeven zoomlevel. Hoe kleiner het getal hoe verder je inzoomt.
}
}
‘Markers’ plaatsen
Wat ook handig is, is markers/icoontjes plaatsen op de kaart. Ik geef hier een voorbeeld waar je het icoontje zelf kan bepalen, dmv het icon object.
Code:
function load() { // Deze functie wordt aangeroepen als de pagina laadt
if (GBrowserIsCompatible()) { // Als de browser google maps aankan..
var map = new GMap2(document.getElementById("map")); // Een nieuw 'map'-object maken map.setCenter(new GLatLng(52.045974, 5.634251), 13); // het huidige midden instellen, en het zoom niveau
map.addControl(new GLargeMapControl()); // Groot zoom/beweeg control
map.addControl(new GMapTypeControl()); // Control voor wisselen van kaarttype
// Een icoontje maken
icon = new GIcon();
icon.image = "http://www.pslover.com/thumbs/7119.jpg"; // De URL van de afbeelding die je wilt gebruiken
icon.iconSize = new GSize(45, 45); // De grootte van het icoontje
icon.iconAnchor = new GPoint(23, 45); // Anker van het icoontje, dus de plek op de afbeelding die precies op het coördinaat moet staan
icon.infoWindowAnchor = new GPoint(5, 1); // De plek tov het icoontje waar infoballonnetjes moeten verschijnen
marker=new GMarker(new GLatLng(52.045974, 5.634251), icon); // De marker maken
map.addOverlay(marker); // De marker plaatsen
}
}
Tekstballonnetjes weergeven
Het is ook mogelijk om een tekstballon, zoals in stripjes, weer te geven boven een marker. Er zijn een aantal soorten tekstballonnen:
- InfoWindow Zonder tabs en zonder HTML
- InfoWindowHtml Zonder tabs en met HTML
- InfoWindowTabs Met tabs en zonder HTML
- InfoWindowTabsHtml Met tabs en met HTML
Ik gebruik in mijn voorbeeld de laatste, dus een ballon met tabs en met HTML.
Code:
function load() { // Deze functie wordt aangeroepen als de pagina laadt
if (GBrowserIsCompatible()) { // Als de browser google maps aankan..
var map = new GMap2(document.getElementById("map")); // Een nieuw 'map'-object maken map.setCenter(new GLatLng(52.045974, 5.634251), 13); // het huidige midden instellen, en het zoom niveau
map.addControl(new GLargeMapControl()); // Groot zoom/beweeg control
map.addControl(new GMapTypeControl()); // Control voor wisselen van kaarttype
// Een icoontje maken
icon = new GIcon();
icon.image = "http://www.pslover.com/thumbs/7119.jpg"; // De URL van de afbeelding die je wilt gebruiken
icon.iconSize = new GSize(45, 45); // De grootte van het icoontje
icon.iconAnchor = new GPoint(23, 45); // Anker van het icoontje, dus de plek op de afbeelding die precies op het coördinaat moet staan
icon.infoWindowAnchor = new GPoint(5, 1); // De plek tov het icoontje waar infoballonnetjes moeten verschijnen
marker=new GMarker(new GLatLng(52.045974, 5.634251), icon); // De marker maken
map.addOverlay(marker); // De marker plaatsen
// Hier ga ik de ballon openen
var infoTabs = [
new GInfoWindowTab("Tab 1", "Dit is <b>tab 1</b>"),
new GInfoWindowTab("Tab 2", "Dit is <b>tab 2</b>")
];
marker.openInfoWindowTabsHtml(infoTabs);
}
}
Events
Google maakt het ook mogelijk om events te gebruiken, hierbij geef je een functie mee (soms met argumenten) aan de addListener functie mee. Enkele nuttige events die mogelijk zijn op het object ‘map’ zijn (met eventueel argumenten):
- click overlay, point
- movestart
- move
- moveend
- zoomend oldLevel, newLevel
- maptypechanged
En een voorbeeld waarbij ik een infowindow open als er op een willekeurige marker wordt geklikt:
Code:
function load() { // Deze functie wordt aangeroepen als de pagina laadt
if (GBrowserIsCompatible()) { // Als de browser google maps aankan..
var map = new GMap2(document.getElementById("map")); // Een nieuw 'map'-object maken map.setCenter(new GLatLng(52.045974, 5.634251), 13); // het huidige midden instellen, en het zoom niveau
map.addControl(new GLargeMapControl()); // Groot zoom/beweeg control
map.addControl(new GMapTypeControl()); // Control voor wisselen van kaarttype
// Een icoontje maken
icon = new GIcon();
icon.image = "http://www.pslover.com/thumbs/7119.jpg"; // De URL van de afbeelding die je wilt gebruiken
icon.iconSize = new GSize(45, 45); // De grootte van het icoontje
icon.iconAnchor = new GPoint(23, 45); // Anker van het icoontje, dus de plek op de afbeelding die precies op het coördinaat moet staan
icon.infoWindowAnchor = new GPoint(5, 1); // De plek tov het icoontje waar infoballonnetjes moeten verschijnen
marker=new GMarker(new GLatLng(52.045974, 5.634251), icon); // De marker maken
map.addOverlay(marker); // De marker plaatsen
// Hier ga ik het event instellen
GEvent.addListener(map, "click",
function(overlay, point){
if(overlay){
var infoTabs = [
new GInfoWindowTab("Tab 1", "Dit is <b>tab 1</b>"),
new GInfoWindowTab("Tab 2", "Dit is <b>tab 2</b>")
];
overlay.openInfoWindowTabsHtml(infoTabs);
}
}
);
}
}
Lijnen trekken
Wat zelfs mogelijk is met google maps is het trekken van lijnen. Hiervoor gebruik je het Polyline object. Door een aantal punten op te geven geef je aan hoe deze moet lopen.
Code:
function load() { // Deze functie wordt aangeroepen als de pagina laadt
if (GBrowserIsCompatible()) { // Als de browser google maps aankan..
var map = new GMap2(document.getElementById("map")); // Een nieuw 'map'-object maken map.setCenter(new GLatLng(52.045974, 5.634251), 13); // het huidige midden instellen, en het zoom niveau
map.addControl(new GLargeMapControl()); // Groot zoom/beweeg control
map.addControl(new GMapTypeControl()); // Control voor wisselen van kaarttype
var polyline = new GPolyline([
new GLatLng(37.4419, -122.1419), // Punt één
new GLatLng(37.4519, -122.1519) // Punt twee
], "#ff0000", 10); // Kleur en breedte in pixels
map.addOverlay(polyline); // Op de kaart plaatsen
}
}
Een tekstballon / InfoWindow tonen bij het aanklikken van de marker
Wat je waarschijnlijk liever wilt is dat een tekstballon pas verschijnt op je kaart als een bezoeker de marker aanklikt. Dit bereik je door het aanroepen van de ballon pas te laten gebeuren, nadat je bezoeker op de marker heeft geklikt. Sluit daarvoor de openInfoWindowHtml() in een methode die ‘luistert’ of er op de marker geklikt wordt. Dit wordt een eventlistener genoemd:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map”));
var point = new GLatLng(52.375300, 4.896059);
map.addControl(new GMapTypeControl());
map.setCenter(point, 14);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(“Beurs van Berlage”);
});
}