Share
Das Betrachten einer Fotokugel fühlt sich fast an, als würde man an dem Ort stehen, an dem das Bild aufgenommen wurde, aber als neue Form digitaler Bilder ist das Teilen von Fotokugeln immer noch etwas umständlich.
In diesem Tutorial zeige ich Ihnen, wie Sie Google Photo Sphären in eine Webseite einbetten können. Wenn Sie zum ersten Mal Code in eine Webseite einfügen, machen Sie sich keine Sorgen. Alle harte Arbeit wurde für uns geleistet: Wir müssen nur drei Elemente sammeln und zusammenfügen. Sie müssen während dieses Vorgangs ein Texteditorprogramm öffnen, um Text- oder Code-Snippets einzufügen und zu bearbeiten, wenn Sie sie sammeln.
Sie können in Google Street View suchen und nach Fotobereichern aus aller Welt suchen und in Ihr Blog einbetten. Sie können auch eine Fotoskugel mit Ihrem Smartphone oder Ihrer DSLR erstellen und zu Google Maps hinzufügen. Sehen Sie sich meine Tutorials an, um Fotos mit einem Smartphone oder einer DSLR zu erstellen.
Suchen Sie die Fotokugel oder das Panorama in Google Maps und klicken Sie in, um sie anzuzeigen. Kopieren Sie die URL und fügen Sie sie in Ihren Texteditor ein. Sie werden feststellen, dass die URL sehr lang ist und in verschiedene Segmente unterteilt ist, die verschiedenen Datenbits entsprechen. Irgendwo in dieser langen URL steht das Pano-ID. Durchsuchen Sie die URL, bis Sie auf den Ausdruck stoßen data =. Dies ist ein Hinweis darauf, wo Sie anfangen sollen. Das Pano-ID befindet sich nach diesem Ausdruck und zwischen den Zeichen !1s und die nächste ! Ausrufezeichen. Zum Beispiel in der Zeichenfolge data =! 3m6! 1e1! 3m4! 1sWijofm0bDHKz2mc4rSk-dg! 2e0! 7i13312! 8i6656, die Charaktere Wijofm0bDHKz2mc4rSk-dg sind die Pano-ID. Kopieren Sie diese Zeichen in Ihren Texteditor, um sie als zu verwenden Pano-ID.
Sie können das auch extrahieren Pano-ID mit Javascript. Glücklicherweise haben einige Leute bereits ein einfaches Online-Tool entwickelt, mit dem wir die Software nutzen können Pano-ID. Mit dem Panoid-Werkzeug können Sie die Pegman zu jedem beliebigen Punkt in Google Maps und bringt den zurück Pano-ID in der unteren linken Ecke. Kopiere das Pano-ID und fügen Sie es in Ihren Texteditor ein.
Gehen Sie zu Google Maps Embed API und klicken Sie auf Street View oder ein benutzerdefiniertes Panorama anzeigen Tab.
Stelle das Pano-ID in dem Benutzerdefinierte Panorama-ID Box. Wenn Sie aus diesem Feld heraus klicken, wird Ihre Fotokugel in der Vorschau angezeigt. Wenn dies nicht der Fall ist, überprüfen Sie das Pano-ID.
Die Fotokugel muss von Google Maps genehmigt und hinzugefügt werden, damit sie verwendet werden kann Pano-ID.
Kopieren Sie den eingebetteten Code am unteren Rand der Seite und fügen Sie ihn in Ihren Texteditor ein, wenn der Foto-Bereich ordnungsgemäß in der Vorschau angezeigt wird.
Bleiben Sie im Google Maps API und klicken Sie auf Sieht gut aus Taste. Dann klicken Sie auf die Registrieren Schaltfläche auf der nächsten Seite. Registrieren Sie sich für eine API, indem Sie sich registrieren, prüfen und den Nutzungsbedingungen zustimmen. Wenn Sie den Bedingungen zustimmen, wird ein neues Projekt für Sie erstellt und ein API-Schlüssel generiert. Sie werden auch zur Entwicklerkonsole geführt.
Klicken Sie in der Entwicklerkonsole auf Ihren Browserschlüssel. Sie werden in die gebracht Browser-API-Schlüssel Seite. Kopieren Sie auf dieser Seite die API-Schlüssel und fügen Sie es in Ihren Texteditor ein.
Es gibt ein weiteres Feld, das Sie ausfüllen müssen, bevor Sie Ihren Schlüssel verwenden können. Im letzten Feld müssen Sie Referrer einrichten. Ihr Referrer wird Ihre Website mit einem Platzhalter Zeichen (*davor und danach. Zum Beispiel: * .yoursite.com / * Dadurch wird der API mitgeteilt, dass jede Seite auf www.yoursite.com die API verwenden darf. Es verhindert auch, dass andere Websites Ihre verwenden API-Schlüssel es sei denn, sie werden hier hinzugefügt.
Fügen Sie Ihre API-Schlüssel zum Code einbetten durch Ersetzen der … in dem Schlüssel =… von deinem Code einbetten mit Ihrer API-Schlüssel.
Wenn Sie einen Inhaltsmanager wie Wordpress verwenden, erstellen Sie eine neue Seite oder einen neuen Blogeintrag. Dann klicken Sie auf die zu HTML wechseln Taste. In diesem Modus können Sie benutzerdefinierten HTML-Code einfügen. Fügen Sie den Einbettungscode ein und klicken Sie auf die Schaltfläche "Speichern". Sie können später wieder in den regulären Modus wechseln, um gewünschten Text oder andere Elemente hinzuzufügen.
Gehen Sie weiter und sehen Sie sich Ihre Seite an. Wenn Ihre Fotokugel erscheint, haben Sie es gut gemacht! Wenn es nicht angezeigt wird, sollte eine Warnmeldung angezeigt werden. Die Warnmeldung informiert Sie, wenn Sie ein Problem mit haben Pano-ID oder mit dem API-Schlüssel. Wenn keine Fotosphäre oder Warnung angezeigt wird, liegt das Problem möglicherweise im Code-Snippet. Kopieren Sie es erneut und fügen Sie es in Ihre Webseite ein.
Wenn Sie Adobe Muse verwenden, klicken Sie auf Objekt Menü und wählen Sie HTML einfügen. Fügen Sie dann Ihr Code-Snippet in das Dialogfeld ein und klicken Sie auf OK. Ziehen Sie das Feld an die gewünschte Stelle auf Ihrer Seite und ändern Sie die Größe auf 600 x 450 Pixel. Um den Fotobereich anzuzeigen, müssen Sie die Site im Web veröffentlichen. Also fahren Sie fort und klicken Sie auf Veröffentlichen. Navigieren Sie nach der Veröffentlichung zu der Seite mit der Fotokugel, um sie anzuzeigen.
Hier ist ein Blick auf meinen Einbettungscode, den ich in meine Seite eingefügt habe:
Accentsconagua