Im ersten Teil dieses Mini-Tutorials habe ich ja schon die Mängel meines Skripts aufgezeigt, die wir heute beheben wollen. Die Vorgabe ist dabei recht einfach: wir wollen auch mit der Maus scrollen, und zusätzlich auch mit der Tastatur. Natürlich soll sich dabei die Anzeige unseres Sliders ändern.
Zumindest das Mausrad einzuschalten ist recht einfach:
map.enableScrollWheelZoom();
Das Mausrad ist im Default ausgeschaltet, und lässt sich mit diesem Befehl einschalten. Baut man ihn in seine Landkarte ein, wird man jedoch feststellen, dass die Zoom-Anzeige die Änderungen mittels Mausrad komplett ignoriert. Entsprechend muss man einen Event der Google Maps API verwenden, der einem mitteilt, wenn sich der Zoomgrad geändert hat. Hierfür stellt die API im GEvent den Event moveend zur Verfügung.
GEVent ist hierbei ein Ereignisbehandlungs-System, das DOM-Knoten Events zuordnet. In unserem Fall ist der Knoten map. Google warnt übrigens davor, das bei Verwendung von Events immense Speicherlöcher auftreten können, und diese immer zusammen mit Closures verwendet werden sollen. Entsprechend ist ein sehr einfaches Beispiel für einen Event-Listener:
GEvent.addListener(map, "moveend", function() {
zoomLevel = map.getZoom();
$("#zoom_slider").slider('value', zoomLevel);
});
Was passiert da genau? Der map wird ein Ereignis hinzugefügt, nämlich immer dann wenn moveend eintritt! In diesem Fall wird mit map.getZoom() der aktuelle Zoomgrad der Karte ermittelt und unserer globalen Variable zoomLevel zugeordnet. Anschliessend wird der Slider auf die korrekte Position des Zoomgrads gestellt.
Bindet man diese kleine Skript ein, wird man sehr schnell feststellen, dass bei Nutzung des Mausrades sich auch der Slider bewegt. Da der Event aber nicht nur das Mausrad betrifft, sondern jede Änderung des Zoomgrades, ändert sich der Slider auch dann, wenn durch ein Doppelklick mit der Maus in die Karte gezoomt wird.
Damit wir die Karte mit den Tasten Plus und Minus zoomen können, verwenden wir wiederum einen Event-Listener, diesmal allerdings einen von jQuery. Das Skript hierzu ist denkbar einfach:
$(document).keypress(function(e) {
switch(e.which) {
case 43:
// Plus
archeol_zoomIn();
break;
case 45:
// Minus
archeol_zoomOut();
break;
}
});
Das Event ordnen wir dem gesamtem Dokument zu, und die Abfrage erfolgt über den ASCII-Code. In unserem Fall steht die Zahl 43 für das Plus, und die Zahl 45 für das Minus. Die beiden functions die ich eingebunden habe, entsprechen den Zoom-Funktionen von gestern. Diese habe ich in eigene Funktionen ausgelagert, da bei Klick auf die Plus- oder Minus-Grafik der gleiche Code Verwendung findet:
function archeol_zoomIn() {
if( zoomLevel < zoomMax ) {
zoomLevel++;
map.zoomIn();
$("#zoom_slider").slider('value', zoomLevel);
}
}
function archeol_zoomOut() {
if( zoomLevel > zoomMin ) {
zoomLevel--;
map.zoomOut();
$("#zoom_slider").slider('value', zoomLevel);
}
}
Somit ist unsere individuelle Zoom-Control fertig und bekommt auch alle Änderungen der Karte mit. Ferner können wir auch mit der Tastatur zoomen. In den nächsten Tagen werden wir zum Scrollen eine eigene Windrose einbauen.
Ja, so sieht das ganze doch schon schöner aus. Allerdings noch ein kleiner Vorschlag: Wenn ich die FindAsYouType-Funktion in Firefox eingeschaltet hab, wird nur das erste +/- erkannt. Dann öffnet sich die Suchbox und alle weiteren Zeichen landen da drin. Mein Vorschlag wäre:
$(document).keypress(function(e) {
switch(e.which) {
case 43:
// Plus
archeol_zoomIn();
if(e.preventDefault)
e.preventDefault();
if(e.originalEvent && e.originalEvent.preventDefault)
e.originalEvent.preventDefault();
return false;
case 45:
// Minus
archeol_zoomOut();
if(e.preventDefault)
e.preventDefault();
if(e.originalEvent && e.originalEvent.preventDefault)
e.originalEvent.preventDefault();
return false;
}
});
Aber bitte nicht grundsätzlich mit preventDefault arbeiten, vielleicht brauch ich die Funktion ja noch auf der Seite ;-)