Ein eigenes Plugin für jQuery schreiben

Das JS-Framework jQuery ist heute quasi die Allzweckwaffe im Web. Man findet zu allen erdenklichen Themen bereits fertige Plugins. Hier eine kleine Einstiegshilfe, wie man ein eigenes Plugin schreibt. Ein kleines jQuery Google Maps Plugin.

29.10.2013

Im folgenden Beispiel schreiben wir zusammen ein kleines jQuery-Plugin.

Die Aufgabe des Plugins wird das Anzeigen einer Google Map sein. Noch nicht revolutionär genug - wir setzen noch einen Pin mitten auf Berlin.

Dabei steht natürlich nicht der weltbewegende Funktionsumfang im Vordergrund, sondern es soll einfach eine kleine Einstiegshilfe in die Pluginentwicklung von jQuery sein.

1. Schritt - HTML

Wir erstellen eine HTML-Datei und legen den Grundstein für die Plugin-Programmierung. im head-Bereich der Seite binden wir zunächst zwei JavaScript-Dateien ein. Einmal die für die Map benötigte Google API V3 und natürlich das Framework jQuery. Eine Google Map benötigt immer einen Container. Dieser stellt unser DIV mit der Klasse .map dar. Weiterhin bringen wir das DIV auf eine Größe von 500 x 500 Pixel.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Map Plugin</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 
<style>
.map {
	width: 500px;
	height: 500px;
}
</style>
</head>
 
<body>
 
<div class="map">
</div>
 
</body>
</html>

2. Schritt das jQuery Plugin

Wir erstellen nun eine neue JS-Datei mit dem Namen map.js

Der erste Code stellt den Rahmen dar. Eine Funktionserweiterung von jQuery mit eurem Namen und den zu übergebenden Parametern: options. $.extend ergänzt sozusagen unser Parameter-Objekt options, sollten wir wichtige Parameter nicht angegeben haben. Es dient als Fallback. Ich habe hier Beispielhaft bereits drei wichtige Google-Maps-Parameter genutzt. Den Zoomlevel und den Mittelpunkt der Karte in Geodaten.

$.fn.cinMap = function(options){
    options = $.extend({
        zoom: 12,
        centerLat:0,
        centerLng: 0
    }, options);
}

3. Schritt - Die Programmlogik des Plugins

Aus dem übergebenen Objekt Options erstellen wir ein neues Objekt mit dem Namen mapOptions.

Aus den reinen Geodaten, die in options.centerLat und options.centerLng stecken, erstellen wir zunächst eine Google-Konforme Position, die wir für Weiteres nutzen können, z.B. das Zentrieren der Google-Karte.

Lat steht für Latitude (Breitengrad( und Lng für Longitude (Längengrad). Zum Testen könnt Ihr diese Daten direkt auf maps.google.de einsehen. Gebt die gewünschte Adresse ein und klickt mit der rechten Maustaste an diese Stelle auf der Karte. Im Kontextmenü wählt Ihr den Punkt "Was ist hier?". Google spuckt euch alsbald die sogenannten Geodaten kommagetrennt in der Eingabemaske aus.

var mapOptions = options;
mapOptions.center=new google.maps.LatLng(options.centerLat, options.centerLng),
 
map = new google.maps.Map(this.get(0), mapOptions);

4. Schritt - Ein Marker fehlt noch

Um zu sehen, wo die Position genau auf der Karte ist, setzen wir an die gleiche Stelle noch einen Google-Standardmarker. Hier können natürlich jederzeit eigene Icons genutzt werden.

// Wir setzen einen Beispielmarker in die Mitte Berlins, er hat beispielhaft die gleiche Position, wie der Kartenmittelpunkt
var markerOptions	= {
  position: mapOptions.center,
  map: map
};
 
var marker = new google.maps.Marker(markerOptions);

5. Schritt - Einbinden des Plugins

Im head-Bereich binden wir unser erstelltes Plugin ein und können dieses dann auf unseren Container .map anwenden. Dabei geben wir unserem Plugin cinMap folgende Parameter mit.

zoom - steht für den Zoomlevel der Karte. 12 ist ein guter Wert. Außerdem geben wir ihm den Mittelpunkt der Karte mit. Sie wird sich dann automatisch an diesem Punkt ausrichten.

<script src="map.js" type="text/javascript"></script>
 
<script>
$(document).ready(function(){
	$('.map').cinMap(
		{
			'zoom': 12,
			centerLat: 52.519146,
			centerLng: 13.40802
		}
	);
});
</script>

Das fertige Plugin

$.fn.cinMap = function(options){
 
	// die Options überschreibt, wenn nicht vorhanden, die übergebenen Parameter
	options = $.extend({
		zoom: 0,
		centerLat:0,
		centerLng: 0
	}, options);
 
 
	// Aus dem übergebenen Breitengrad und Längengrad erstellen wir eine neue Position auf der Karte
	var mapOptions = options;
	mapOptions.center=new google.maps.LatLng(options.centerLat, options.centerLng),
 
	// Die Map wird erstellt
	map = new google.maps.Map(this.get(0), mapOptions);
 
	// Wir setzen einen Beispielmarker in die Mitte Berlins, er hat beispielhaft die gleiche Position, wie der Kartenmittelpunkt
	var markerOptions	= {
		position: mapOptions.center,
		map: map
	};
 
	var marker = new google.maps.Marker(markerOptions);
 
}

So das wars fürs erste. Ich hoffe ich konnte euch zumindest den Einstieg etwas erleichtern. Damit sind der Kreativität keine Grenzen gesetzt.

Weitere Infos zum Thema Plugin-Entwicklung in jQuery findet ihr natürlich in der offiziellen Dokumentation. Zur Google Maps API gibt es hier weitere Infos.

Übersicht Entwickler-Blog