Die Google Maps-Widgets wurden über 7,000 Mal heruntergeladen von der Mendix App Store. Das ist eine beeindruckende Zahl und macht es zu einem der beliebtesten verfügbaren Widgets. Dieser Beitrag hebt eine praktische neue Funktion hervor, mit der Sie Ihren benutzerdefinierten Google Maps ein gutes Aussehen verleihen und ihr Design an die Anwendung anpassen können, die Sie entwickeln.
Laden Sie das Google Maps-Widget herunter
Passen Sie Ihre Google Maps an
Das Google Maps-Widget verfügt über eine neue Registerkarte „Anpassung“. Mit dieser brandneuen Funktion können Sie Ihren Karten Farbschemata hinzufügen, die zum Stil Ihrer restlichen Anwendung passen. Fügen Sie Ihren Stil einfach zum Stil-Array auf der Registerkarte „Anpassung“ hinzu. Siehe Abbildung 1:
Abb. 1: Benutzerdefinierte Google Maps Style Array-Eigenschaften
Das Einzige, was jetzt noch fehlt, ist etwas Inspiration, wie man einen guten Kartenstil findet, der zur Anwendung passt. Zum Glück gibt es eine tolle Website, die Ihnen dabei hilft: Schicke Karten.
Schicke Karten
Schicke Karten ist eine Community, die sich mit der Erstellung toller Designs für Google Maps beschäftigt. Ab Version 3 der Google Maps API können Sie benutzerdefinierte Stile zu Karten. So können Entwickler und Designer einen Stil auswählen, der zum Thema ihrer Website passt.
Snazzy Maps bietet Ressourcen, die die Webentwicklung erleichtern. Wie jede großartige Ressource ist sie auf großartigen Inhalt angewiesen. Alle Stile auf der Website werden von Community-Benutzern erstellt und kostenlos zur Verfügung gestellt. Die Stile sind lizenziert unter Creative Commons und die Nutzung ist völlig kostenlos.
(Quelle: snazzymaps.com)
Wenn Sie auf Snazzy Maps Ihren bevorzugten Stil gefunden haben, kopieren Sie das JavaScript Style Array in den Abschnitt Style Array im Google Maps-Widget, wie in Abbildung 2 gezeigt:
Abb. 2: Stil-Array aus Snazzy-Maps kopieren
Klicken Sie einfach auf die Schaltfläche „Kopieren“ und das Stilarray wird in die Zwischenablage kopiert. Gehen Sie zurück zum Google Maps-Widget im Modellierer und fügen Sie das Stilarray in den rechten Abschnitt ein. Hier ist ein Beispiel des Ergebnisses, in dem Sie den Unterschied zwischen einem Standard-Google Maps-Stil und einer benutzerdefinierten Karte sehen können. Abbildung 3 zeigt den Standard-Google Maps-Stil und Abbildung 4 den benutzerdefinierten Stil „Unsaturated Browns“, der von Simon Goellner erstellt wurde:
 |
 |
| Abb. 3: Google Standard-Styling | Abb. 4: Individuell gestaltete Karten von Simon Goellner |
Ausführlichere Anweisungen erhalten Sie in der entsprechenden Anleitung: Anleitung zum Gestalten benutzerdefinierter Google Maps
@Simon Black,
Vielen Dank für die Implementierung dieser einfachen Lösung, die einen großen Einfluss auf die Gestaltung der Karten hat.