Google Maps

Bedienelemente unter Kontrolle

  1. Wegweiser: Google Maps API
  2. Geocoding
  3. Bedienelemente unter Kontrolle

Das modifizierte Beispiel mit der Infoblase, die erst beim Klick auf den Marker erscheint, sieht folgendermaßen aus:

var point = new GLatLng(48.1371155, 11.5748594); var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml ("Marienplatz in München"); }); map.addOverlay(marker);

Verbindungslinien

Um Routen einzuzeichnen, brauchen Sie Verbindungslinien, die über Polylines realisiert werden. Für diese Linien setzt die Google Maps API auf SVG (Scalable Vector Graphics) beziehungsweise auf VML (Vector Markup Language) für den IE. Deswegen müssen Sie den VML-Namensraum im html-Start-Tag angeben, wenn Sie Polylines einsetzen.

<html xmlns="http://www.w3.org/1999/ xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

Bei den Polylines bestimmen Sie die Farbe, die Dicke und Grad der Transparenz.Im Beispiel führt die Linie von point1 zu point2, die Farbe ist #F00, die Dicke 3px und die Linie ist halbtransparent. Die Verbindungslinien zählen wie die Markierungen zu den Overlays, deswegen verwenden Sie ebenfalls die Methode addOverlay(), um Verbindungslinien zur Karte hinzuzufügen.Das folgende Beispiel zeigt die Definition von Punkten, die durch eine Verbindungslinie verbunden sind. Dann werden Markierungen an beiden Punkten definiert und auch die Linie wird der Karte hinzugefügt.

var point1 = new GLatLng(48.137462, 11.573849); var point2 = new GLatLng(48.137784, 11.572765); var poly = new GPolyline([point1, point2], "#f00", 3, 0.5); map.addOverlay(new GMarker(point1)); map.addOverlay(new GMarker(point2)); map.addOverlay(poly);

Eigene Icons

google, google maps, api, internet, webdesign, webpage

© Internet Magazin

Die nächste Version von Google Maps wird speziell für eine bessere und schnellere Darstellung auf mobilen Endgeräten entwickelt.

Sie wollen die Standardmarkierungen durch eigene ersetzen? Kein Problem. Bevor man jedoch daran geht, hilft es, sich die Standardmarkierungen einmal genauer anzuschauen. Einen Überblick über diese verschaffen Sie sich einfach über die Firefox-Erweiterung Web Developer Toolbar (https://addons.mozilla.org/de/firefox/addon/60 ).Rufen Sie auf einer Seite mit einer Karte samt Markierung im Menü der Webdeveloper Toolbar unter Bilder den Unterpunkt Bildinformationen anzeigen auf. Dann sehen Sie alle für die Karte verwendeten Bilder und dass an der Darstellung der Marker mehrere Bilder beteiligt sind. Außerdem ist deutlich erkennbar, dass jede Google-Karte aus mehreren Kacheln, also einzelnen Bildern, besteht.Wenn Sie eigene Icons benutzen wollen, so müssen Sie diese erst einmal erstellen. Sie benötigen:

  • das Icon selbst (PNG-Format)
  • einen passenden Schatten (PNG-Format)
  • Icon und Schatten zusätzlich auch als transparentes Bild - für den Internet Explorer 6 und für den Ausdruck
Sie können natürlich auch aus einer großen Anzahl von fertigen Icons im Netz wählen, Links dazu im Kasten. Erstellen Sie nun eine neue Instanz von GIcon():
var myIcon = new GIcon(G_DEFAULT_ ICON);

Wenn Sie G_DEFAULT_ICON übergeben, hat das den Vorteil, dass Sie nicht alle Eigenschaften des Icons definieren müssen. Wird eine Eigenschaft nicht spezifiziert, werden die Standardeigenschaften verwendet.Jetzt geht es an die Definition der Eigenschaften des Icons: Hier geben Sie zuerst den Pfad zum Bild, danach den zum Schattenbild an:

myIcon.image = "eigenes_ icon.png"; myIcon.shadow = "eigener_ schatten.png";

Dann folgen die Pfade zu den beiden transparenten GIF-Varianten:

myIcon.printImage = "eigenes_icon.gif"; myIcon.printShadow = "eigener_schatten.gif";

Außerdem definieren Sie die Größe des Icons und seines Schattens:

myIcon.iconSize = new GSize(24, 40); myIcon.shadowSize = new GSize(44, 40);

Nun bestimmen Sie die Position, an der das Icon auf der Karte verankert werden soll:

myIcon.iconAnchor = new GPoint(6, 20);

Schließlich erstellen Sie das Objekt mit den Optionen und definieren den neuen Marker mit den angegebenen Optionen.

markerOptions = { icon:myIcon }; var marker = new GMarker(point, markerOptions);

Diesen können Sie dann in gewohnter Manier mit addOverlay() auf der Karte platzieren:

map.addOverlay(marker);

Link-Tipps

Google Maps über einen Iframe in die Webseite integrieren    http://maps.google.com/help/maps/getmaps/quick.html Dokumentation zur Google Maps API    http://code.google.com/intl/de/apis/maps/documentation/index.html Blog über neue und attraktive Anwendungen von Google Maps    http://googlemapsmania.blogspot.com/ Überblick über verwendbare Icons für Google Maps

 http://mapki.com/index.php?title=Icon_Image_Sets

Verwendung der Google Maps API, um sich auf Gemälden zu "bewegen"   http://www.thekremercollection.com/art/artists/Pieter-Verelst/The-schoolmaster-and-his-pupils/detail/

Die nächste Version von Google Maps - derzeit noch bei Google Lab   http://code.google.com/apis/maps/documentation/v3/

Aber das ist längst nicht alles, was Sie mit der Google Maps API machen können: Die Schnittstelle lässt sich auch mit PHP/MySQL nutzen, um beispielsweise einen Filialfinder zu programmieren. Oder aber Sie nutzen die Google Maps Funktionalität - aber mit Ihren eigenen Bildern als Material.So bietet die Kremer-Collection beispielsweise Ihren Besuchern die Möglichkeit, sich mithilfe der Google Maps API zu bewegen: zoomen und Details betrachten, den Bildausschnitt verschieben - alles wie bei Google Maps, nur dass es sich um ein Gemälde handelt. Und gleichzeitig wird an der nächsten Version - Version 3 - der Google Maps API gearbeitet, die eine verbesserte Unterstützung von mobilen Endgeräten bringen soll.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".