Advitum.de auf Google+

Google-Map richtig auf der eigenen Internetseite einfügen

Google-Map richtig auf der eigenen Internetseite einfügen
VN:F [1.9.22_1171]
Bewertung: 4.3/5 (14 Stimmen abgegeben)
Von am
Kategorien: Arbeit, CSS, Design, JavaScript, Programmieren, Tutorials

Es gibt ein paar Seitenelemente, die meine Kunden eigentlich immer auf ihrer Internetseite haben wollen—ein Beispiel hierfür ist eine Karte. Dank Google ist das Einbetten von Karten in Internetseite fast lächerlich einfach: Google-Maps öffnen, Position wählen und Code kopieren, so einfach kann das Leben sein—zumindest, wenn man keine besonderen Anforderungen hat.

Das Problem ist aber, das der durchschnittliche Kunde immer irgendwelche Extrawünsche hat—das fängt schon beim eigenen Firmenlogo als Marker-Icon an. Hier stößt das Kopieren und Einfügen des Embed-Codes von Google an seine Grenzen und nach einer kurzen Recherche ist klar: Wir müssen das mit der Google-Maps-API machen, das kann ja nicht so schwer sein—ist es aber doch.

Ich weiß nicht, ob es nur mir so geht, aber meiner Meinung nach ist das Referenzhandbuch der Google-Maps-API v3 extrem unübersichtlich. Ich musste stundenlang rumsuchen und rumprobieren, bis alles so war, wie ich es wollte. Deshalb will ich in diesem Artikel anhand eines Beispiels zeigen, was ich gefunden habe.

Google-Map richtig auf der eigenen Internetseite einfügen, 4.3 out of 5 based on 14 ratings

Schritt 1: Wo soll die Karte überhaupt hin?

Als erstes müssen wir irgendwo auf der Seite, nämlich genau da, wo die Google-Map später sein soll, ein Div-Element einfügen.

<div id="googleMap"></div>

Ich lege auch direkt die Breite und Höhe der Map per CSS fest.

#googleMap
{
	width: 700px;
	height: 500px;
}

Man sieht zwar noch nichts, doch damit haben wir den Grundstein für das weitere Vorgehen gelegt.

Schritt 2: Google-Maps-API laden

Nun laden wir die Google-Maps-API, mit der wir die Karte erzeugen wollen. Dazu fügen wir folgenden Code in den Kopf der Seite ein:

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

Schritt 3: Karte im Div anzeigen

Als nächstes generieren wir mit der API die Karte in dem Div. Dazu benutzen wir folgendes JavaScript:

function showMap()
{
	var map;
	var latlng = new google.maps.LatLng(51.38732, 7.67878);
	
	if(document.getElementById(&quot;googleMap&quot;))
	{
		map = new google.maps.Map(document.getElementById("googleMap"), {
			zoom: 15,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});
	}
}

In der Variable map Wird die Karte gespeichert, damit man sie noch verändern kann. In latlng wird der Ort gespeichert, den man in der Karte markieren will. Doch wie bekommt man die Koordinaten? Das ist ganz einfach: Öffne Google Maps und suche den Ort, der markiert werden soll. Dort, wo der Marker später stecken soll, klickst du mit der rechten Maustaste und wählst »Was ist hier?«. Nun stehen oben im Suchfeld die Koordinaten des Ortes, den du markieren willst, diese Koordinaten musst du nur noch in die Klammern im obrigen Code kopieren!

Und warum steht der ganze JavaScript-Code in einer Funktion? Es ist wichtig, das er nicht ausgeführt wird, wenn das JavaScript geladen wurde, sondern erst, wenn die ganze Seite vollständig geladen wurde. So wird sichergestellt, das das Element, in dem die Google-Map angezeigt werde soll, schon existiert. Deshalb müssen wir noch folgende Änderung am Body-Element der Seite vornehmen:

<body onload="showMap();">
Man sieht nur eine Karte
Bisher ist die Karte noch nichts Besonderes—das hätten wir auch ohne die API hinbekommen.

Schritt 4: Marker an die gewünschte Position setzen

Nun wollen wir natürlich noch das Revier markieren‐oder was auch immer sich hinter unseren Koordinaten verbirgt. Dazu erweitern wir unser JavaScript ein wenig.

function showMap()
{
	var map;
	var latlng = new google.maps.LatLng(51.38732, 7.67878);
	
	if(document.getElementById("googleMap"))
	{
		map = new google.maps.Map(document.getElementById("googleMap"), {
			zoom: 15,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});
		
		setTimeout(function() 
		{
			var marker = new google.maps.Marker(
			{
				position: latlng,
				map: map,
				draggable: false,
				animation: google.maps.Animation.DROP,
				title: 'Advitum Webdesign'
			});
		}, 1000);
	}
}

Mithilfe des Timeouts sorgen wir dafür, das der Marker etwas zeitverzögert angezeigt wird, so kommt die Animation besser zur Geltung. Der gesetzte Titel wird angezeigt, wenn der Nutzer die Maus über den Marker bewegt.

Schritt 5: Das eigene Icon als Marker verwenden

Nun öffnen wir Photoshop, denn wir brauchen jetzt eine Grafik, die wir als Marker verwenden. Ich verwende einfach mein Logo im Kleinformat und lege darum ein abgerundetes Rechteck mit Kontur und weißer Füllung. Unten füge ich noch eine Spitze hinzu, die auf den Ort zeigen soll. Diese Form habe ich dupliziert und etwas verformt, um sie als Schatten zu verwenden.

Ein Marker mit dem Logo von Advitum.
Ein Marker für unsere Karte plus Schatten.

Ihr könnt gerne meine PSD-Datei verwenden, aber ihr solltet natürlich das Logo austauschen! Wenn ihr fertig seid, müsst ihr zwei PNG-Dateien exportieren, eine mit dem Marker ohne Schatten und eine mit dem Schatten ohne Marker, beide Grafiken müssen die gleiche Größe haben. Notiert euch außerdem die Maße des Bildes und die Position der Spitze, diese könnt ihr mit dem Linealwerkzeug heraus. Wenn ihr meine Vorlage benutz, könnt ihr euch das sparen, übernehmt dann einfach die von mir verwendeten Werte!

Wir erweitern jetzt wieder unser JavaScript:

function showMap()
{
	var map;
	var latlng = new google.maps.LatLng(51.38732, 7.67878);
	
	if(document.getElementById("googleMap"))
	{
		map = new google.maps.Map(document.getElementById("googleMap"), {
			zoom: 15,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});
		
		setTimeout(function() 
		{
			var marker = new google.maps.Marker(
			{
				position: latlng,
				map: map,
				draggable: false,
				animation: google.maps.Animation.DROP,
				title: 'Advitum Webdesign',
				icon: new google.maps.MarkerImage(
					'images/pin.png',
					new google.maps.Size(81, 52),
					new google.maps.Point(0, 0),
					new google.maps.Point(17, 45)
				),
				shadow: new google.maps.MarkerImage(
					'images/pinshadow.png',
					new google.maps.Size(81, 52),
					new google.maps.Point(0, 0),
					new google.maps.Point(17, 45)
				)
			});
		}, 1000);
	}
}

Mit icon definieren wir den Marker selbst, mit shadow den Schatten des Markers. Nun zu den Maßen: 81×52, das ist die Größe des Markers und 17×45, das ist die Position der Spitze. Setzt hier eure Werte ein oder behaltet meine bei, wenn ihr meine PSD-Vorlage benutzt habt.

Schritt 6: Link zum Routenplaner

Schließlich wollen wir noch einen Link zum Google-Maps-Routenplaner hinzufügen. Dazu verwenden wir einfach folgenden HTML-Code und passen einfach die Koordinaten an:

<a href="http://maps.google.com/maps?daddr=51.38732,7.67878" target="_blank"&gt;Direkt zum Routenplaner&lt;/a>

Unsere Google-Map ist jetzt fertig. In der Referenz finden sich noch viele Funktionen und Tricks, aber diese Ausführung sollte den meisten Kunden genügen. Den gesamten Beispielcode könnt ihr gerne Herunterladen und weiterverwenden!

Auf der Karte findet sich jetzt das individuelle Logo wieder.
So sieht unser Endresultat aus. Mit dem Icon lassen sich noch einige Experimente anstellen.
Google-Map richtig auf der eigenen Internetseite einfügen, 4.3 out of 5 based on 14 ratings

Links zum Thema

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Max schrieb am Antworten

Sehr schon übersichtlich und zusammenfassend erklärt. Toll!
Vielen Dank auch!

Das einzige Problem, das ich damit habe: Dein Marker samt Shadow kommen zwar rein, verschwinden nach dem AnimationDrop aber sofort wieder.
Mit Mouseover erscheint dann der Title, aber eben nicht mehr der Marker.

Ist das Absicht? Und wie kann man das verhindern (der Marker sollte dauerhaft in seiner Position sichtbar bleiben)?

Beste Grüsse,
Max

    Lars Ebert schrieb am Antworten

    Das ist echt seltsam, denn bei mir funktioniert alles einwandfrei.

    Hast du den Quellcode genau so übernommen? Bekommst du irgendwelche Fehler? Welchen Browser benutzt du, welche Version?

uwe schrieb am Antworten

habe das gleiche problem. benutze mozilla firefox neueste version (13.0)

Lars Ebert schrieb am Antworten

Schau mal auf der Seite http://wsb-gmbh.eu/19.kontakt-anfahrt/ ganz unten, ob dort bei dir der Fehler auch auftritt. Ansonsten schau vielleicht da mal in den Quellcode und vergleich mit deinem Code, vielleicht hat sich ja irgendwo ein Fehler eingeschlichen.

Stefan schrieb am Antworten

… ja, bei mir ist es auch so.
Der Pin erscheint und ist sofort wieder weg.

comaco schrieb am Antworten

hi, also ich hatte den selben Fehler bei Firefox, in einem google Bsp habe ich gesehen, dass es bei icon & shadow reicht, wenn man nur drei Zeilen schreibt und sich nur die erste Zeile auf „Size“ bezieht, die anderen beiden auf „Point“.

hier wäre das sowas wie


new google.maps.Size(81, 52),
new google.maps.Point(0, 0),
new google.maps.Point(17, 45)

bei mir hat das geholfen und der Marker bleibt

lg co

Daniel schrieb am Antworten

Hi,

danke für die gute Anleitung. Falls ihr noch das Problem mit dem verschwinden habt. Hatte diesen auch und nachdem ich Zeile 25-28 entfernte, klappts (den Shadow habe ich komplett weg gelassen).
….
icon: new google.maps.MarkerImage(
‚fileadmin/global/img/maps-icon.png‘
)
});
….

Reiner schrieb am Antworten

Deine Erklärungen sind echt klasse, wenn man Java nicht versteht.

Wie wird denn dann noch eine Variable Anzahl an Positionen, aus einer Datenbank eingefügt?

Herbert Klar schrieb am Antworten

Hallo Lars,
deine Anleitung klingt super einfach. Ich (nicht wirklich Typo3- bzw Java- Experte) habe allerdings ein grundsätzliches Problem damit.
Und zwar weiß ich nicht, wo genau/wie ich die einzelnen Codes in meiner Webseite einbauen muß. Fürchte, die Frage ist zu wahrscheinlich zu blöde, um sie zu beantworten, falls aber doch wäre das für mich eine große Hilfe, da ich schon alles mögliche ausprobiert habe um eine google map in meine Typo3 7.6 – Seite einzubauen, leider bis jetzt ohne Erfolg.

Diese Artikel könnten dir auch gefallen