Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Panoramafotografie: Virtuelle Touren mit Pano2VR

Google Maps einbauen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Im Skin Editor wird nun eine Karte auf Basis von Google Maps eingebaut und konfiguriert. In diesem Video bekommen Sie zusätzlich auch Nutzungs- und Sicherheitshinweise.

Transkript

Für den Einbau einer Google Maps Karte nehme ich mal hier einfach das simplex_v5-Skin, was wir jetzt hier schon mal schnell reingeschmießen haben als Ausgangspunkt, weil das eigentlich relativ gut funktioniert, und da kann man ein bisschen aufräumen, und dann sehen wir auch gleich, wie man so einen vorhandenen Skin anpasst. Ich öffne das mal und werde das gleich mal vorweg unter einem anderen Namen in meinem Arbeitsverzeichnis speichern. Das ist virtual_tour_m_karte schoenbrunn. Und ich nenne das mal simplex_v5_gmap für Google Map und gebe das mal hier rein und schmeiße gleich mal ein paar Sachen raus. Ich brauche da viele Sachen gar nicht, zum Beispiel, hier mal diese ganzen Video-Pop-up-Geschichten. Das kann ich alles mal rauswerfen mit der Entfernen-Taste. So, theoretisch funktioniert das. So, das close brauche ich auch nicht. Ein screentint brauche ich nicht und verschiedene Hotspots außer dem ht_node, das brauche ich auch nicht. Und die Hotspots loading und controller mache ich mal aus, dass ich ein bisschen Platz am Schirm habe hier unten. Ein bisschen Übersicht, und ich speichere das mal ab und schließe das, und jetzt wird das hier eingetragen eben $d wieder in mein Arbeitsverzeichnis unter diesem Namen. [... ]das kurz aus, ob das alles so funktioniert, wie wir uns das vorstellen, und das schaut aber alles ziemlich gut aus, und wieder rück Tour. Und jetzt gehen wir hier in den Skin rein, und ich habe jetzt, wie gesagt, mal alles ausgeblendet, und wir haben im Kopf die ganzen Elemente, die wir einfügen können. Unter den ziemlichen fortgeschrittenen und doch sehr funktionellen Elementen findet sich hier an dieser Stelle die Karte. Wenn ich die klicke und dann eine Karte zeichne, dann wird die hier eingebaut, jetzt einen schwarzen Rand. Also ich mache das meistens so und ich nenne die mal google map. So, und ich setze die meistens auf, weil die hatten immer einen schwarzen Rand, ich setze die mal auf -2, -2, und dann schaut der Rand auf jeden Fall nicht mehr ins Bild. Und dann die Höhe mache ich in 100 %, weil das den ganzen linken Rand belegen soll, und die Breite sage ich mal auch im Prozent, und so Hausnummer, ja 25 % ist schon ganz gut, so. Und in der Höhe mache ich dann 101%, dann verschwindet nämlich genau dieser schwarze Rand und da unten steht nichts Wichtiges mehr. So, wenn ich das jetzt mal speichere und schließe, dann schauen wir uns mal an, was daraus geworden ist. So. Da gibt es gleich mal Maulerei: "Ihr Skin enthält Kartenelemente, aber Sie haben keinen Google Maps API Key angegeben." So, was ist das? Man kann Google Karten auf zweierlei Art und Weise in eigene Webprojekte einbinden. Das eine ist die ganz normale Sharing-Funktion. Da mache ich halt einfach einen Rahmen in meiner Website auf und dann habe ich eine Adresse von Google, eine URL, wo dann meine spezielle Karte aufgerufen wird. Das ist relativ easy. Da braucht man nichts Großartiges für Können, weil diese Karte im Prinzip ein völlig abgeschlossener Container ist, und das ist normalerweise kein größeres Problem. Interessanter wird die Geschichte, wenn diese Google Map Karte wirklich mit Ihrer Umgebung interagiert, und das tut sie hier, denn wir benutzen die Karte, um Panoramen umzuschalten, und mit dem Radar auf der Karte zeigen wir die Richtung, die geschaut wird Umgekehrt wechseln die Panoramen beim Springen von einem Hotspot zum anderen, wechseln die Location. Das muss die Karte irgendwie mitkriegen, das heißt, die kriegt diverse Aufrufe und empfängt Aufrufe. Und diese Funktionalität ist natürlich eine ganz andere Resourcenbelastung, und das möchte Google ganz gerne wissen, wer das benutzt. Vor allen Dingen, wenn das dann richtig viel wird und ich habe so eine schöne Panoramatour, die hundert tausendmal angeschaut wird pro Tag, und die Karte hat entsprechend viele Aufrufe, dann sagt Google, jetzt ist es ein bisschen viel, das kostet etwas Geld, nicht viel letzten Endes, aber es kostet dann eben ein Geld, aber es ist in einem normalen Rahmen. Ich habe jetzt die Zahlen nicht im Kopf, aber es gab 250.000 Aufrufe im Monat, die kostenfrei sind, und das ist relativ viel. Das bringt man so schnell nicht zusammen. Okay, auch wenn ich jetzt hier diese Meldung bekomme, kann ich trotzdem mal OK klicken und das ausgeben. Der Tour wird weitergegeben. Und es erscheint da "Hoppla! Ein Fehler ist aufgetreten". So mehr erfahren wir jetzt da nicht dazu, und in der JavaScript-Konsole von meinem Browser steht eigentlich genau das, was gerade in der kleinen Beschwerdebox drin war, und wir müssen einen sogenannten API Key einbauen in die Karte, damit die dargestellt wird, damit Google weiß, okay, der hat sich von uns angemeldet. Das ist der und der, und der hätte ganz gerne diese Karte benutzen, soll er machen, aber wir wollen wissen, wer ist. So, wenn ich auf die Karte gehe, dann finde ich hier in den Eigenschaften unter der Position Karte. Hier mal ich muss das ein bisschen größer machen, damit man das auch sieht erst mal verschiedene Kartenanbieter. Ich kann noch auf ArcGIS, [... ] oder ein System umschalten oder auf OpenStreetMap. Da gibt es diese API-Beschränkungen nicht, sondern das können wir hier vollfrei verwenden, weil das ist ein offenes Kartensystem, OpenSource der Liste Community dabei. Und hier kann ich eben Google Maps verwenden und da Google Maps auch einstellen, welchen Kartentyp hätte ich gerne, reine Straßenkarte, Gelände, Satellitenbild oder die Mischung zwischen Straßenkarte und Satellit Hybrid. Das verwende ich meistens, weil das relativ nett funktioniert. Und hier gibt es eine Box, die heißt Google API Key. Okay, was ist das? Wie kommt man dran? Da gibt es hier eine kleine Box, und hier ist es so, dass da auch nochmal im Prinzip nichts wesentlich Neues drinsteht, aber da kann ich draufklicken und lande in der Doku von Pano2VR und dadrin gibt es einen Link Read more about the API Key and authentication. Das ist zwar auf Englisch, aber man muss einfach nur auf diesen Link klicken. Und ich mache das mal in einem neuen Tab auf, und dann landet man hier, das ist dann wieder Deutsch, von Google lokalisiert. Und da kann ich oben einfach draufklicken einfach Preise und Nutzungsmodelle anzeigen. Da gibt es eine Information. Wenn es richtig viel wird, kann man aber vorne einmal ziemlich ignorieren. Man sieht dann eben, die Website mit der eigenen virtuellen Tour so richtig durch die Decke geht, dann wird mir es auch interessieren. Ich lasse das jetzt mal außen vor, Und wenn ich einen Schlüssel anfordere, dann muss ich mich einloggen. Ich gehe jetzt mal nicht diesen ganzen Prozess durch mit der Anmeldung bei Google, sondern ich habe mal nur die wichtigsten Screens einfach kurz als Screenshots abgelegt. Wenn man sich registriert hat, diesen Schlüssel angefordert hat, dann sagt man einfach, dass man einen neuen Schlüssel haben möchte, und man kann einen Projektnamen vergeben, und der ist an die E-Mail-Adresse des Google-Accounts gebunden, und man kann jetzt hier diesen Schlüssel bereits kopieren, Das ist der erste Schritt, der dann eben für diese Geschichten vergeben wird. Und das Ganze ist aber nicht so ganz ohne. Unten steht ein Ausrufezeichen Schlüsseleinschränkung. Wenn man diesen Schlüssel einfach so einbaut, dann können den findige Leute auslesen, weil der wird mit dem Projekt mitgespielt, weil natürlich auf der Website dieser Schlüssel irgendwo liegen muss, damit Google den abfragen kann. Und man kann sich den holen, und gerade, wenn es um eine kostenpflichtige Nutzung geht bei Seiten, die sehr viel Betrieb haben, dann können die auf blöde Gedanken kommen und sagen, okay, wir holen [... ] von irgendwem, und der zahlt das dann. Deswegen sollte man diesen Schlüssel schützen. Das würde ich unbedingt empfehlen. Das ist noch nicht wichtig, solange Sie das Lokal probieren bei sich auf der eigenen Website. Aber selbst dort brauchen Sie das bereits, weil der Pano2VR-Webserver ist ein Webserver, und der braucht auch schon diesen API Key, also ohne geht es gar nicht. Und der untere Teil ist nicht ganz uninteressant, und deswegen gibt es da dann eben die Möglichkeit, hier den HTTP-Verweis-URLs (Website) zu beschränken und hier einfach die Adressen anzugeben, unter denen die eigene Website erreichbar ist. Ich habe das jetzt mal hier für meine Domain gemacht panoramaserver, das ist so eine Domain, die ich eigentlich nur für solche Sachen gemacht habe, zum Testen, und das gilt hier vorne. Das Sternchen halt, das gilt für alle Subdomains, das heißt, für panormaserver alleine, für www.panoramaserver oder zum Beispiel für test.panoramaserver.at oder ich richte irgendwelche Domains für Kunden ein, damit die das angucken können, und dann auch für alle Verzeichnisse, die dann von daraus aufgerufen werden. Und ab dann wird dieser Key nur noch akzeptiert, wenn er von diesen beiden Adressen kommt beziehungsweise allem, was hier, man nennt das eine Wildcard, das heißt, alles, was hier von diesen beiden Adressen inklusive der Variablen hier abgedeckt ist. Alles, was von woanders kommt, wird sofort geblockt. Und da erscheint die Karte dann nicht, und da gibt es auch eine Fehlermeldung. Sie benutzen einen ungültigen Key und Sie nicht berechtigt sind, diesen Key zu benutzen. Wie gesagt, das ist Gratis. Man muss sich einmal durch diese Registrierungsgeschichte durchhangeln, und dann kann man diesen Key einbauen. Ich habe mir den jetzt mal schon besorgt und kopiere mir den mal und füge den hier ein. So, ich habe das jetzt hier auch so gemacht. Der ist länger, der ist wesentlich länger als diese Textbox. Sie sehen, können Sie den ruhig angucken. Da können Sie nichts mitanfangen. Sie müssen sich das wirklich dann eben für sich selber auch wirklich einrichten. So, und wirklich ist, dass man dann irgendwie nochmal woanders hinklickt, dass hier auch wirklich akzeptiert wird hier in der Box, dieser Key, denn wenn ich das speichere, dann nehme ich das manchmal nicht an. Und ich schließe das Ganze, Änderungen speichern. Und wenn ich jetzt nochmal die Ausgabe drücke, sollte es eigentlich funktionieren. Es gibt keine Beschwerden. Und es gibt eine Google Map. Also das, wie gesagt, das weist mich jetzt aus, und zwar wir sehen jetzt hier, ich bin zwar auf dem localhost. Bei localhost, da muss ich nur irgendeinen gültigen Key haben, aber es muss einer sein, der wirklich eingetragen ist, Und solange der noch nicht in einer freien [...] verwendet, reicht es mir auch, wenn ich hier noch nicht auf Domains beschränke, kann man hier, zum Beispiel, machen oder es ist zum Beispiel notwendig, wenn ich einen Kunden habe, und der weiß noch nicht genau, wie seine Website dann heißen wird. Gibt es hier auch so was hier. Und da dann kann ich es erst mal einfach auf irgendeine Adresse beziehungsweise unbeschränkt lösen diesen Key, weil solange ich den nur auf meinem Localhost verwende, kommt dann niemand dran außer mir. Aber jetzt funktioniert die Geschichte, und das heißt, die Karte ist fertig eingebaut in meine Tour, und jetzt wird auch entsprechend verlinkt. Das bringt jetzt Google auch schon von sich aus mit. Sobald ich da auf so einen Marker klicke, wird auch der entsprechende Klon losgelassen. Das ist also von Pano2VR schon vorgefertigt, dass die Karte auch genau diese Funktionalität hat und mir einfach auch im Web zeigt, wo das Ganze dann wirklich hingeht, wenn ich irgendwohin klicke. Also so viel mal zum Einbau der Google Karte in ein Pano2VR-Projekt, in eine virtuelle Tour.

Panoramafotografie: Virtuelle Touren mit Pano2VR

Lernen Sie, wie Sie mit Pano2VR mehrere Panoramen zu einer interaktiven, begehbaren Besichtigungstour zusammenstellen und für das Web ausgeben.

9 Std. 51 min (103 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!