google maps

..oder: geht nicht gibt’s nicht!..

Was ist der größte Unterschied eines Android-Smartphones zu einem mit Apples IOS? Nein, es ist nicht der Preisunterschied (der seit einiger Zeit nicht mehr wirklich relevant ist, oder das Versorgen mit Betriebssystemupdates) – Es bietet die Option, mittels KLWP (Kustom Live Wallpapere) die Benutzeroberfläche an seinen eigenen Geschmack anzupassen.

Ganz ehrlich: ich habe immer noch mein iPhone 6S Plus im Einsatz, aber seitdem keine Jailbreaks mehr funktionieren und es den CYDIA Shop nicht mehr gibt, habe ich mich an der Optik satt gesehen. LAAANGWEILIG!

Das ist bei allen Android-Handys glücklicherweise anders.  Mittels sogenannter “Launcher” und Icon Packs kann man die Optik so stark verändern, dass selbst die bizarrsten Vorstellungen möglich sind. Ein weiteres Tool, welches noch tiefer ins Systemeingreift ist das “KLWP” (Abkz. für “Kustom Live Wallpaper”).

(Bild Links: dank KLWP wird die Benutzeroberfläche des ANDROID Smartphones Multifunktional: Hier sind die Funktionen noch alle verschämt hinter dem runden Button unten Rechts versteckt. Aber wehe man klickt darauf – dann sieht man die ganze Stärke von KLWP!)

Was kann KLWP?

Das KLWP Tool bietet schier endlose Möglichkeiten die Benutzeroberfläche seines ANDROID Smartphones zu “pimpen”. Egal ob es um dynamische Animationen, Hintergrundbilder, mehrere Kacheln, das einbinden des Musikplayers mit eigener Benutzeroberfläche, das anzeigen des Kalenders mit den anstehenden Terminen, der Wettervorhersage oder dem anzeigen des aktuellen Standortes mittels google Maps. Das – und vieles mehr – ist alles möglich!

Ich will jetzt aber nicht einen Leitfaden zur Erstellung eines Themes in KLWP geben (dafür gibt es genug gute Anleitungen im Netz und auf YouTube), sondern ganz speziell auf ein Problem eingehen, was mich seit längerem gestört hat: nämlich, dass die google Maps in den Bibliotheken der Komponenten “Kustom Maps” oder anderen, welche die google Maps in KLWP einbinden konnten, nicht mehr funktionierten.

Die Designer hatten dafür erst mal keine Lösung parat, sondern ersetzten einfach die Komponenten, welche auf google Maps zugriffen durch andere, wie die “CMX – Old School Map”.

Der Grund warum google Maps nicht mehr funktionieren..

Der Grund, warum die Maps plötzlich alle nicht mehr funktionierten, war eigentlich simpel. Google beantwortet Positions-Anfragen nur noch, wenn ein gültiger API-Key übermittelt wird. Alle Anfragen ohne diesen Key werden ignoriert. Der Hintergrund ist, dass google den Dienst zwar zur Verfügung stellt, der ist aber nur noch bedingt kostenlos. Ab einer bestimmten Anzahl von Aufrufen  hält google die Hand auf und lässt sich die Nutzung des Dienstes bezahlen. Ich halte das auch für legitim – eine Navi-Software fürs Auto ist ja auch in aller Regel nicht kostenlos.

Einen kleinen Web-Account, wie meinen trifft das nicht. Die Zugriffe auf mein Kartenmodul sind so gering, dass ich nie in die Verlegenheit komme, google Geld überweisen zu müssen. Trotzdem bekomme ich jeden Monat eine Rechnung zugeschickt, die aber immer 0,00 € ausweist.

Out of Topic: OSM – auch mal einen Blick wert

Ich nutze auch die google Maps auf meinem Blog nicht, sondern die wirklich gute Alternative OpenStreet Map, mit deren Api. Ich habe festgestellt, dass die Navigationsberechnung damit sogar besser funktioniert. Ebenso wird die Wegstrecke zum ausdrucken angezeigt.

Ihr könnte das auf meiner Veranstaltungsseite selber ausprobieren – lasst euch bei einem Event mal den Veranstaltungsort anzeigen und lasst euch die Route von Open Street Map berechnen. In das Feld mit den Zahlen gebt Ihr einfach euren Wohnort: Straße und Ort ein – den Rest macht Open Street Map..

(Bild Rechts: Open Street Map in Aktion! Wer sagt, dass kostenlose Freeware schlechter ist als Software vom Platzhirsch?. OSM (Open Street Map) ist schnell, komfortabel und steht in Sachen Routenberechnung den google Maps in keiner Weise nach. Wenn man sich eine Route ausrechnen lässt, bietet OSM sogar die Routenanweisung an. Auch die Möglichkeit zu Fuß ein Ziel zu erreichen kann OSM und folgt nicht stur den Straßen, sondern kennt auch Abkürzungen mit Fußgängerüberwegen)

Der Weg zu den Maps: die google Api

Doch kommen wir zurück zu der Google Api und warum ohne die keine Anfragen von google mehr beantwortet werden. Wie man richtig vermuten kann, braucht man für die API einen Developer Account bei google.

(Bild links: die Live-Vorschau zeigt schon mal den Standort an. Das gleiche gilt auch für die Streetview Kachel. Dass beide Anzeigen dynamisch sind und sich beim wandern in der freien Natur aktualisieren und ständig den tatsächlichen Standort anzeigen ist klar, oder? Und dass ich das Kartendesign passend zum Theme angepasst habe war auch logo, nöö?)

Der wird zwingend benötigt und genutzt um ein Projekt zu generieren. Dieses Projekt wiederum soll auf die Maps Api zugreifen – sinnvollerweise bindet man noch verschiedene andere Features an – Streetview zum Beispiel.

(Bild Rechts: Theoretisch kann man auch einfach ein Bild einfügen und als URL den Aufruf der google Api und der gewünschten Kartenparameter hinterlegen.

Wesentlich einfacher zu konfigurieren geht es mit der im Play Store erhältlichen Komponente “Kustom Map Maker”. Dort lassen sich sowohl Art der Karte: Satellit, Roadmap, Gelände, aber auch die Farbe der Karte, wie auch die gewünschte Größe sehr einfach über das Menü anpassen)

Auch auf das erklären, wie man einen Account erstellt will ich hier verzichten. Es gibt dafür genügend Infos und How-Tos im Netz.

Ich will euch zeigen, wie der google Api-Key in die Kustom Map eingebunden wird, damit Ihr auf der Benutzeroberfläche des Android-Handys immer über den aktuellen Standort informiert seid.

The Key is the Answer…

Dazu erstellt Ihr in KLWP ein Theme (oder sinnvoller erwerbt Ihr euch bei bekannten Designer im Play Store eines. Die Preise liegen bei 1-2 € – das sollte ja wohl selbst für den größten Geizhals noch bezahlbar sein).

Im KLWP Editor navigiert ihr in eingeschalteter Live-Vorschau zu dem Bereich mit einer google Map oder der CMX-Old School Map. Üblicherweise wird die bei der Wetterübersicht eingebunden.

Je nach eingebundener Komponente kann es nötig sein, die vorhandene zu löschen und durch die Kustom Map Komponente zu ersetzen, da einige Komponenten nicht die Möglichkeit bieten den Api-Key in die URL einzubinden. Wichtig ist, dass ihr bei der Map auf den Reiter “Effekte” geht. Bei Texturen muss Bitmap stehen und darunter die URL. Die ist normalerweise ellenlang, weil dort die Konfiguration der zurück gegebenen Karte mit übermittelt wird.

Ihr müsst aber nur ganz zum Anfang scrollen, denn dort gehört der gelb markierte Api-Key hin:

https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&callback=initMap

Direkt hinter dem Fragezeichen von staticmap muss euer Key eingetragen werden. Wichtig ist, dass ihr den Textstring “key=” (ohne Hochkomma) davor setzt und hinter den alphanumerischen API-Key noch ein “&” setzt.

Sinngemäß funktioniert dies beim Aufruf der Streetview API genauso, wie ihr auf dem Bild links seht – dort beginnt der google Maps Aufruf genauso, allerdings wird die Rückgabe von google mittelshttps://maps.googleapis.com/maps/api/streetview angefordert.

Und alles klar? Funktioniert der Kartenaufruf im KLWP bei euch jetzt – nutzt Ihr die google Maps überhaupt? Lasst gerne ein Feedback da..

..oder: wie man google Maps dank Fusion Builder farblich an AVADA und andere Themes anpassen kann..

Man kennt das ja: man hat in stundenlangem tüfteln seinem Theme die passenden Farben spendiert, bindet auf dem Kontaktformular eine google Map mit den Standorten und den dort ansässigen Ansprechpartnern ein – und dann passt die google Map farblich so gar nicht zum Design des Blogs. Aber welcher Besucher möchte schon gern auf einem langweiligem Kontaktformular landen, welches weder stylisch noch textlich zum Rest des Blogs passt?

Ein Beispiel wie es richtig gut aussehen kann ist hier:

Klar hat nicht jedes WordPress Theme die stylischen Möglichkeiten von Avada – welches dank dem integriertem Fusion Builder wesentlich mehr Möglichkeiten bietet, um auf einfache Art und Weise Seiten mit ansprechendem “WOW”-Effekten und Inhalten zu füllen. Doch AVADA bietet Sie glücklicherweise nun mal – und deshalb sollte man Sie auch nutzen.

Und für diejenigen von euch, die das AVADA Theme und dessen unendliche Möglichkeiten noch nicht kennen, möchte ich hier zeigen, wie man ein simples Kontaktformular mit Fusion Builder Elementen “aufhübscht”. Das gute daran: das mit den Fusion Builder Elementen erstellte Formular funktioniert auch unter anderen Themes!

Was braucht Ihr dafür?

• Zuallererst natürlich das AVADA Theme (erhältlich bei Themeforest.net),
• dann müssen natürlich die im AVADA Theme integrierten Plugins Fusion Core und Fusion Builder aktiv sein
• das empfohlene Plugin Contakt Form 7 (oder ein anderes WordPress Mail-Formular) muss installiert und aktiviert sein
• ein gültiger API Key für google Maps muss vorhanden sein
• (optional) ein Captcha Key muss bei google generiert werden

Alles vorhanden? Dann kann’s ja losgehen..

Wenn Ihr diesem Link folgt, dann seht Ihr, welche Optionen AVADA bietet, um die google Maps farblich ins Theme einzubinden und die verschiedenen Orte, die angezeigt werden sollen, mit personalisierten Icons zu versehen.

Eines sei vorausgeschickt: es gibt mehrere Möglichkeiten nach Rom zu kommen – bzw. ein Kontaktformular zu erstellen. Bei der 1. Möglichkeit nutzt man die Avada Themeeinstellungen, erstellt eine Seite und wählt das Contact-Template. Die google Maps Anpassungen macht man dann in den Avada Theme Optionen.

(Bild links: Kontaktformular aus dem Avada Theme heraus erstellen – geht auch, funktioniert aber nur bei aktiviertem Avada-Theme – besser ist der Weg über den Fusion Builder)

Der Nachteil bei dieser Verfahrensweise: wechselt man vom Avada Theme auf ein anderes, dann funktioniert das Contact Template nicht mehr, da es zu den Avada Theme Optionen  gehört.

Man kann allerdings das Theme wechseln und das Avada Plugin “Fusion Builder” aktiv lassen. Hat man ein anderes Theme aktiviert und erstellt eine Standard Seite, funktionieren die Fusion Builder Elemente auch dort. Man kann also über die Schaltfläche “Fusion Builder Element Generator” alle für Avada verfügbaren Elemente (und davon gibt es im Vergleich zu anderen Themes wirklich reichlich) in jedem anderem Theme einbauen.

Im nächsten Schritt muss dann nur im Menü die Standardseite eingebunden werden und als Kontaktformular benannt werden.  Dieses Vorgehen macht Sinn, wenn man öfters das Theme wechselt, wenn sich das Avada Theme als zu Scriptlastig herausstellt und lange Ladezeiten verursacht – oder wenn man einfach mal etwas neues ausprobieren möchte, was optisch noch besser zu seinem Blog passt.

(Bild rechts: Ein anderes Theme – hier Magic Mag – ist aktiv (und wie man sieht, bringt es auch einige Elemente mit – aber bei weitem nicht die Vielfalt des Fusion Builder, der wie man sieht trotz anderem Theme aktiv ist), und trotzdem kann man mit dem Fusion Builder bequem Elemente auf seiner Seite einbauen)

Doch kommen wir zurück zur Formularerstellung:

Zwingend ist natürlich das Formular um mit uns in Kontakt zu treten. Dies erstellt man ziemlich bequem mit dem bekannten Plug-In “Contact Form 7”. Nach der Erstellung bindet man das Formular mittels eines Shortcodes bequem auf der Kontakt-Seite ein.

Unter normalen Umständen würde dies schon reichen – aber wir wollen ja ein Formular mit mehr Pep erstellen, deshalb binden wir auch noch eine Google Map ein, die unseren Wohnort oder bei Bedarf sogar mehrere Orte anzeigt – und dies sogar noch angepasst an unser Theme Layout.

Und als wenn das nicht reichen würde, bauen wir auch noch eine Akkordeon Funktion, welche Fragen zum Kontaktformular enthält, ein – die sich bei anklicken “entrollt”, und den bis dahin verborgenen Inhalt freigibt.  Dieses Akkordeon kann man sehr gut bei den beliebten “FAQ”s (frequently asked Questions = häufig gestellte Fragen) einsetzen: es spart Platz auf der Seite, der Besucher muss weniger scrollen und er braucht nur auf den Punkt klicken, der Ihn interessiert – die Erklärungen, der für Ihn nicht relevanten Themen, bleiben ausgeblendet.

Die Akkordeon Funktion heißt im Fusion Builder “Toggles” und findet sich im Reiter “Builder Elements”. Mann muss nur noch die Überschriften eintippen, wählt den Text, der beim entrollen angezeigt werden soll (der lässt sich per Editor formatieren), dann noch Styling- Bönsches wie ob ein Rahmen angezeigt werden soll, welche Rahmenfarbe der haben soll, ob eine Trennlinie angezeigt werden soll und vieles mehr.  Der Fusion Builder lässt von den Optionen her keine Wünsche offen.

Fangen wir als erstes mit der google Map an, denn die möchte ich ganz oben auf der Seite anzeigen lassen. Ich selber habe nur eine Adresse – aber der Fusion Builder Map-Generator unterstützt mehrere Adressen – darüber hinaus für jede Adresse ein angepasstes Icon und angepasste Info-Boxen (wie das aussieht, könnt Ihr auf dieser Testseite sehen). Dazu muss für jeden Eintrag in den entsprechenden Feldern der vertikale Strich “|” als Trenner eingefügt werden. Auf der Windows Tastatur liegt dies Zeichen auf der “Alt GR” Taste und der Taste rechts neben “Shift”.

Man kann seine Adresse/n in das dafür vorgesehene Feld ganz normal eingeben, so als würde man es in einem Brief als Anschrift eintippen. Google Maps erkennt meistens die Adresse – wie gesagt meistens. Alternativ kann man aber auch die Geodaten eingeben. Um an die zu kommen (die werden normalerweise so nicht angezeigt), klickt man an der gewünschten Position mit der RECHTEN Maustaste. Im sich nun öffnenden Kontextmenü wählt man den Eintrag “was ist hier?” und daraufhin werden die Geodaten unten im Fenster in einem Popup angezeigt. Dort auf die Geodaten geklickt, erscheint auf der linken Seite ein blauer Bereich in dem die Geodaten angeteigt werden. Wichtig dabei: nur die auf dem Bild rot umrandeten Werte mit der Maus markieren und per Paste ‘n Copy in das dafür vorgesehene Feld einfügen.

Das schöne am Fusion Builder: benutzt man ihn, statt dem Standard Editor, erkennt er den erzeugten Code, der sehr umfangreich sein kann und zeigt Ihn in einer übersichtlichen grafischen Umgebung an. Dadurch lassen sich schnell Änderungen an den Einstellungen vornehmen, ohne dass man im Quellcode herumfummeln muss und eventuell die ganze Seite zerstört. Dies funktioniert bei allen Elementen – wenn man vorher einen Container erstellt hat (Voraussetzung für die Nutzung der Fusion Builder Elemente) .

Über die Container kann man auch die Breite und Anzahl der gewünschten Objekte steuern. Eine Aufzählung hier würde zu weit führen – schaut einfach auf die Avada Fusion Builder Referenz.  Leider ist die Dokumentation nur auf Englisch verfügbar, aber dafür auch sehr umfangreich und gut erklärt.

Wir erstellen also für unsere Kontaktformular-Seite einen Container in 100% Seitenbreite. In den Container packen wir nun die entsprechenden Objekte, so wir wir Sie angezeigt haben wollen (auch hier unterstützt uns der Fusion Builder: wenn ich später die Reihenfolge der Objekte ändern möchte, dann kann ich das bequem per Drag ‘n Drop tun (Wichtig: Nicht vergessen die Änderungen durch drücken der Taste “Save” ganz unten zu speichern!).  In den Container fügen wir nun das Element “Google Map” ein. Das Vorgehen ist eigentlich selbsterklärend und wird dazu auch noch in den einzelnen Masken erklärt.

Als Breite der Map geben wir 100% ein, da Sie über die ganze Seitenbreite reichen soll. Die Höhe sollte nicht zu groß gewählt werden, damit der Besucher nicht zu weit scrollen muss um die anderen Inhalte zu sehen. Ein Ausschnitt von 300 Pixeln reicht meistens. Als nächstes kann man sich um die Zoomstufe kümmern. Der voreingestellte Wert ist eigentlich für eine einzelne Adresse schon gut –  sollten mehrere Standorte angezeigt werden sollen, dann sollte man den Zoomfaktor so weit hinauszoomen, dass alle Orte auf einer Karte angezeigt werden. Als Karten Overlay kann man sich eine Farbe auswählen, die zum Theme passt – man ist hier nicht auf die google Standardfarbe der Maps beschränkt. Ebenso verhält es sich mit den “Infoboxen” (die kleinen erklärenden popup Fenster unter den Standort-Icons). Schriftfarbe und Hintergrundfarbe lassen sich bequem per Farbpicker in exakten RGB Werten einstellen. Experimentiert einfach mal ein bisschen mit den Einstellungen

Kommen wir zum nächsten Element: dem Akkordeon – oder Toggle Element. Auch dies brauchen wir nur aus der Bibliothek auswählen und anklicken. Ein Element reicht, denn wir können es um weitere Einträge erweitern. Auch hier sind die Einstellungen selbsterklärend, bzw. kann man damit ein bisschen herumspielen. Rahmen oder nicht, und wenn, welche Farbe? Es fällt manchmal schwer nicht zu viele Optionen zu nutzen – weniger ist meistens mehr. Wichtig ist die Einstellung “Open by Default”, heißt also, ob der versteckte Inhalt am Anfang angezeigt werden soll – also ob das “Akkordeon” entrollt ist, oder nicht. Auch hier gilt: einfach mal mit den Einstellungen herumprobieren. In das Feld der Überschriften schreiben wir die einzelnen FAQ- Fragen – in das Feld welches sich nach dem entrollen öffnet die entsprechenden Antworten.

Nun sind wir auch schon beim letzten Element: dem eigentlichen Mailformular. Dafür wird im Fall von dem Plug-In “Contact Form 7” nur der Shortcode zu dem Mailformular eingefügt, welches vorher in den Plug-In-Einstellungen erstellt worden ist. Dort sind auch die Einstellungen für das – optional vom gleichen Entwickler erhältliche – ReCaptcha-Tool vorzunehmen. Um das ReCaptcha Tool zu nutzen muss man es bei google beantragen (hier der Link zur Webseite).  Dort erhält man einen Api-Key, den man im entsprechenden Feld des Plug-Ins einträgt.  Auch für die Nutzung der google Maps benötigt man im übrigen einen Api-Key, den man im Avada Theme unter dem Pfad:  Avada > Theme Options > Contact Form > Google Map in das entsprechende Feld eingibt.

Tja, das war’s eigentlich auch soweit schon. Noch Fragen? Dann müsst Ihr mir schreiben – und könnt auch sofort das angepasste Super-Duper Kontaktformular benutzen!..