Verwendung der Google Maps API

0

Vor einigen Tagen habe ich bereits in einem Artikel beschrieben, wie man einen Shortcode programmieren kann, der eine Google Maps-Karte auf einer Wesbite einbindet. Dabei wurde auf den standardmäßigen Einbettungscode zurückgegriffen, der die Karte innerhalb eines iframes anzeigt. Das große Problem bei dieser Lösung besteht allerdings darin, dass man eine spezielle Client-ID anfordern muss. Zudem empfiehlt Google die Nutzung nur auf kleineren privaten Websites. Die weitaus professioneller Lösung ist die direkte Nutzung der Google Maps API. Hierfür gibt es einige Plugins, wie zum Beispiel gmap3, das die Verwendung der API vereinfachen und das ich im Folgenden vorstellen möchte.

1) Einbinden des Plugins

Um das Plugin in Ihrem Projekt zu verwenden, laden Sie es zunächst von dieser Seite herunter. Kopieren Sie die gmap3.js beziehungsweise gmap3.min.js in Ihr Projektverzeichnis. Sofern nicht schon geschehen, binden Sie nun zunächst die aktuelle Version der Javascript-Bibliothek jQuery im Dokumentenheader ein. Anschließend müssen noch die Google Maps API und das Plugin-Script eingebunden werden. Achten Sie hierbei darauf, den richtigen Pfad zur Datei anzugeben.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="pfad/gmap3.min.js"></script>

2) Basisfunktionen des Plugins

Über die grundlegenden Funktionen des Plugin möchte ich an dieser Stelle nicht allzuviel sagen, denn auf der Website des Projekt sind sämtliche Funktionen leicht verständlich erklärt.
Die Aktivierung des Scripts erfolgt über folgenden Code, den Sie an der entsprechende Stelle innerhalb des Projekts aufrufen.

$(document).ready(function(){
    $(".googlemaps").gmap3();
});

Zudem wird ein neues DOM-Element benötigt, in dem die spätere Karte angezeiget werden kann. In diesem Fall handelt es sich dabei um einen div-Container, dessen Höhe und Breite festgelegt sind. Außerdem erhält der Container eine eigene Klasse mit dem Namen “googlemaps”. Dieser findet sich auch innnerhalb des Scripts wieder, da hier das entsprechende DOM-Element über $(".googlemaps") angesprochen wird.

<div class="googlemaps" style="height:350px; width:600px"></div>

Sofern Sie bis hierhin keinen Fehler gemacht haben, sollte nun an der entsprechende Stelle, an der Sie den obigen Code eingefügt haben, eine Google Maps-Karte angezeigt werden.

Möchten Sie nun den Ort ändern, der auf der Karte angezeigt wird, benötigen Sie zunächst dessen genaue Koordinaten (Längen-, Breitengrad) im Gradnetz der Erde. Nun können Sie diese Daten an die Funktion .gmap3() übergeben. Dazu rufen Sie die Aktion init auf und übergeben Längen- und Breitengrad an die Eigenschaft center. Mithilfe der Eigenschaft zoom können sie festlegen, wie weit die Karte nach der Initialisierung herangezoomt ist.

$(document).ready(function(){
    $(".googlemaps").gmap3(
        { action: 'init',
            options: {
                center: [52.729225, 8.283876],
                zoom: 2
            }
        }
    );
)};

3) Erstellen eines Google Maps-Shortcodes

Am Ende dieses Artikels möchte ich nun zeigen, wie man einen Shortcode für das Anzeigen einer Google Maps-Karte unter Zuhilfename des Plugins erstellen kann. Dies geschieht über den nachfolgenden Code, der in die functions.php eines WordPress-Themes kopiert wird. Hier werden im Wesentlichen Einstellungen zur Positionierung der Karte, zum Zoom und zur Position eines Markers festgelegt. Der große Vorteil besteht allerdings darin, dass man im Gegensatz zum vorherigen Beispiel keine Koordinaten mehr eingeben muss, sondern lediglich die Adresse benötigt. Diese wird dann automatisch zentriert und mit einem Marker hervorgehoben.

// Google Maps
function LB_googlemaps($atts, $content = null) {
	extract(shortcode_atts(array( 'width' => '658', 'height' => '350', 'zoom' => 15, 'address' => '' ), $atts));
	return '<script type="text/javascript">
				/* <![CDATA[ */
				$(document).ready(function(){
					$(".googlemaps").gmap3(
						{ action : \'getLatLng\',
							address: \'' . $address . '\',
							callback: function(result){
								if(result){
									$(this).gmap3({action: \'setCenter\', args:[ result[0].geometry.location ]},
									{action: \'setZoom\', args:[' . $zoom . ']});
								}
							}
						},
						{ action: \'addMarker\',
							address: \'' . $address . '\'
						}
					);
				});	
				/* ]]> */
			</script>
			<div class="googlemaps-container">
				<div class="googlemaps" style="width:' . $width . 'px; height:' . $height . 'px;"></div>
			</div>';
}
add_shortcode('googlemap', 'LB_googlemaps');

4) Verwendung des Google Maps-Shortcodes

Haben Sie den Code zu Ihrem Theme hinzugefügt, können Sie nun den folgenden Shortcode mit Parametern für die Höhe und Breite der Karte, der aktuellen Adresse und der Zoomstufe nutzen.

[googlemap width="" height="" address="" zoom=""]

Soll Beispielsweise eine Karte mit meiner Adresse angezeigt werden, nutze ich folgende Einstellungen innerhalb des Schortcodes. Höhe und Breite sind optional und werden standardmäßig auf 658 Pixel Breite und 350 Pixel Höhe eingestellt.

[googlemap address="Brüsseler Straße 22, Vechta" zoom="17"]

Die Ausgabe sollte anschließend so aussehen.

5) Fazit

Das Plugin gmap3 stellt eine sehr gute Lösung zur einfachen Nutzung der Google Maps API dar. Zwar könnte man auf den Einsatz des Plugins verzichten und die API direkt ansprechen, der Programmieraufwand wäre in diesem Fall aber um einiges größer. Weiterhin sei gesagt, dass die oben vorgestellten Beispiele nur einen Bruchteil der Möglichkeiten zeigen, die das Plugin bietet. Wer sich weiter mit der Materie auseinandersetzten möchte, sollte daher unbedingt einen Blick in die Dokumentation auf der oben verlinkten Projektseite werfen.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.