Google Maps API – Individueller Zoom

Nett ausgedrückt würde ich den „richtigen Weg“ für die Erstellung eines individuellen Zoom’s für die Google Maps API als anstrengend bezeichnen. Aber wie heißt es so schön? Viele Wegen führen nach Rom, und deshalb verwenden wir für unser Demo Mashup jQuery und benutzen einen indirekten Weg. Trotzdem legt uns die API viele Steine in den Weg, die wir im Laufe dieses Beitrages allesamt beheben werden. Basis dieses Tutorials ist der Slider aus der jQuery UI.

Bevor wir aber an das JavaScript heran gehen, brauchen wir erstmal ein paar Div-Layer, um die eigene Control über der Karte anzeigen zu können:

<div id="zoom_wrapper">
    <div id="zoom_in"></div>
    <div id="zoom_slider" style="height:200px;"></div>
    <div id="zoom_out"></div>
</div>

Die Höhe des mittleren DIV’s geben wir direkt an, da der jQuery-Slider ansonsten Größenformatierungen ignorieren würde. Die drei innen liegenden Layer haben eine ganz einfache Bewandnis. In zoom_slider kommt der eigentliche Slider, in zoom_in und zoom_out jeweils eine Grafik, die zum Zoomen per Klick dient (plus / minus). Damit die Layer auch wirklich über der Karte angezeigt werden, müssen die Positionen relativ mit einem entsprechenden z-index angegeben werden. Im Demo-Mashup sieht das passende CSS wie folgt aus:

#zoom_wrapper {
    position:relative;
    z-index:20;
    top:25px;
    left:25px;
    height:325px;
    width:60px;
    text-align:center;
}
 
 
#zoom_in {
    margin: 0 auto;
    padding-left: 5px;
}
 
#zoom_out {
    margin: 0 auto;
    padding-left: 5px;
    padding-top: 5px;
}
 
#zoom_slider {
    margin: 0 auto;
}

Damit hätten wir zumindest die Position der Control schon einmal pixelgenau bestimmt. Unser Javascript erweitern wir bei dieser Gelegenheit um einige globale Variablen:

var zoomLevel = 13;
var zoomMax = 18;
var zoomMin = 8;

Dabei ist zoomLevel der aktuelle Zoomgrad der Karte, zoomMax ist der höchste Zoomgrad der Karte, zoomMin der kleinste. Natürlich müssen wir jetzt beim Initialisieren der Karte auch die globale Variable verwenden, und nicht mehr den hart codierten Wert. Entsprechend ändert sich der Befehl setCenter aus der Demo-Anwendung:

map.setCenter(point, zoomLevel)

Man muss absolut sicher stellen, das man die Karte auch auf den Zoomgrad zoomLevel stellt, da ansonsten der Slider den verkehrten Wert anzeigen würde. Und schon fangen die Probleme an :) Google Maps gibt für den Zoom einen Default-Zoomgrad vor, der natürlich nicht passend ist. Ferner kann jedem Kartentyp ein eigener Zoomgrad zugewiesen werden. Im Worst Case braucht also jeder Kartentyp auch einen individuellen Slider, da verschiedene Zoomgrade vorhanden sein könnten. Dieses Problem lösen wir, in dem wir zum einen allen Kartentypen den gleichen Zoomgrad zuweisen und vor allem unsere eigenen Defaults vorgeben. NACH initialisieren der Karte fügen wir deshalb das folgende Javascript ein:

var mt = map.getMapTypes();
for (var i=0; i<mt.length; i++) {
   mt[i].getMinimumResolution = function() {return zoomMin;}
   mt[i].getMaximumResolution = function() {return zoomMax;}
}

Was passiert da? Zunächst einmal speichern wir in der Variable mt alle verfügbaren Kartentypen (die man logischerweise vorher definiert haben sollte), und dann durchlaufen wir diese mit einer for-Schleife. Bei jedem dieser Kartentypen geben wir unsere Variablen zoomMin und zoomMax als Default-Werte zurück. Wer auf seiner Karte noch die originale Zoom-Control eingebunden hat, wird sehen, wie sich deren Höhe durch Nutzung dieser Schleife verändern wird.

Zu guter Letzt müssen wir den Slider noch initialisieren. Entsprechend muss unsere Onload-Funktion angepasst werden:

$(document).ready(function() {
    gmaps_initialize();
    zoom_control();
});

in der Funktion gmaps_initialize führen wir die Standard-Konfiguration unserer Map durch, in der noch nicht vorhandenen Funktion zoom_control initialisieren wir den Slider. Diese Funktion sieht wie folgt aus, und richtet sich nach der Dokumentation für Slider:

function zoom_control() {
    // Slider einrichen
    $("#zoom_slider").slider({
        orientation: "vertical",
	range: "min",
	min: zoomMin,
	max: zoomMax,
	value: zoomLevel,
        slide: function( event, ui ) {
            map.setZoom( ui.value );
            zoomLevel = ui.value;
        }
    });
    // Klick-EVent auf Zoom In
    $("img#zoom_in").click(function() {
        if( zoomLevel < zoomMax ) {
            zoomLevel++;
            map.zoomIn();
            $("#zoom_slider").slider('value', zoomLevel);
        }
    });
    // Klick-Event auf Zoom Out
    $("img#zoom_out").click(function() {
        if( zoomLevel > zoomMin ) {
            zoomLevel--;
            map.zoomOut();
            $("#zoom_slider").slider('value', zoomLevel);
        }
    });
}

Eigentlich ganz einfach oder? Wir definieren einen Slider mit unseren globalen Variablen, die als Maximum, Minimum und als aktuelle Position herhalten müssen. Im Event slide definieren wir, was eigentlich passieren soll, wenn sich der Wert des Sliders ändert. Hier verwenden wir den Befehl map.setZoom, mit dem wir einen neuen Zoom-Level setzen können. Der Zoomgrad entspricht in diesem Fall der Position des Sliders. Darüber hinaus müssen wir in der Variable zoomLevel jede Änderung nachhalten, da sie ja den aktuellen Zoomgrad enthält.

Die beiden bereits genannten Bilder in den Layern belegen wir mit einem Klick-Event. Hier verwenden wir die beiden Funktionen map.zoomIn() und map.zoomOut(). Auch hier müssen wir in der Variable zoomLevel Änderungen am Zoomgrad nachhalten, und darüber hinaus müssen wir auch sicher stellen, das bei den Klick-Events weder Maximum überschritten, noch Minimum unterschritten wird. Durch einen Klick auf Plus/Minus ändert sich natürlich auch der Wert des Sliders, den wir manuell mittels $(„#zoom_slider“).slider(‚value‘, zoomLevel); setzen müssen.

Das war schon die ganze Magie! Natürlich gibt es Wege, die mehr an die Google Maps API angepasst sind. Und natürlich kann man es auch schöner lösen, aber dies erscheint mir der schnellste Weg zu sein, der dabei noch einigermaßen elegant erscheint. Einen Haken hat die Sache allerdings: der Slider bekommt weder ein Zoomen per Mausrad, noch per Tastatur mit. Dies werden wir im nächsten Teil dieses Mini-Tutorials ändern, und sowohl einen Tastatur-Zoom, als auch einen Zoom per Mausrad einführen.

Ähnliche Beiträge

Google Maps Api – Infofenster mit Tabs Eines der größten Probleme bei Google Maps ist es stets, eventuell vorhandene Informationen in den Infofenstern zu verpacken. Hierbei gibt es zwei gru...
Google Maps zieht die Bremse Nunja, schaut man sich mal um wer wo weshalb Google Maps einsetzt, kommt man schnell zu dem Ergebnis, dass es so ziemlich jeder tut. Die Einbindung is...
Google Maps API mit jQuery Wie gestern bereits angekündigt, geht es imGoogle Mashup Demo nun erst mal wieder mit der Landkarte an sich weiter. Ich habe heute die Anwendung auf j...
Google Maps API: Bedienelemente auf der Karte plat... In unserem Mashup ist zurzeit die Control immens im Weg, da ich eigentlich oben links einen individuellen Slider für einen individuellen Zoom einbauen...

4 Antworten auf „Google Maps API – Individueller Zoom“

  1. Da ist aber noch mindestens ein Fehler drin. Beim Doppelklick auf die Map wird diese an der geklickten Stelle vergrößert. Der Zoom-Regler macht da aber nicht mit.
    Außerdem: Die normale GoogleMap lässt sich mit dem Mausrad zoomen, das scheint bei dir nicht zu gehen. Wäre aber schöner, das ist eine für mich persönlich wichtige Funktion.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.