Come incorporare Google Photo Sphere sul tuo blog o sito web

La visualizzazione di una foto sferica sembra quasi come stare nel luogo in cui è stata scattata l'immagine, ma, come nuova forma di immagine digitale, la condivisione di foto sferiche è ancora un po 'ingombrante.

In questo tutorial ti mostrerò come incorporare le photo sphere di Google su una pagina web. Se è la prima volta che inserisci il codice in una pagina web, non preoccuparti. Tutto il duro lavoro è stato fatto per noi: abbiamo solo bisogno di raccogliere tre elementi e metterli insieme. Durante questo processo avrai bisogno di un programma di editor di testo per incollare e modificare testo o frammenti di codice man mano che li raccogli.

Trova o crea una foto Sfera

Puoi cercare in Google Street View e trovare qualsiasi foto sferica da tutto il mondo e incorporarla nel tuo blog. Oppure puoi creare una foto sferica usando lo smartphone o la DSLR e contribuirla con Google Maps. Vedi i miei tutorial su come creare una foto sferica con uno smartphone o una DSLR.

Trova il numero ID del panorama

Trova la foto panoramica o il panorama su Google Maps e fai clic su per visualizzarlo. Copia e incolla l'URL nel tuo editor di testo. Noterai che l'URL è molto lungo e suddiviso in segmenti diversi che corrispondono a diversi bit di dati. Da qualche parte in questo lungo URL è il ID Pano. Guarda attraverso l'URL fino a quando non trovi l'espressione data =. Questo è un indizio su dove iniziare a cercare. Il ID Pano si trova dopo questa espressione e tra i personaggi !1s e il prossimo ! punto esclamativo. Ad esempio, nella stringa data =! 3M6! 1E1! 3M4! 1sWijofm0bDHKz2mc4rSk-dg! 2E0! 7i13312! 8i6656, i personaggi Wijofm0bDHKz2mc4rSk-dg sono i ID Pano. Copia questi caratteri nell'editor di testo da utilizzare come ID Pano.

Puoi anche estrarre il ID Pano usando javascript. Fortunatamente, alcune persone hanno già creato un semplice strumento online da utilizzare per afferrare il ID Pano. Lo strumento Panoid ti consente di trascinare il Pegman a qualsiasi punto su Google Maps e restituisce il ID Pano nell'angolo in basso a sinistra. Copia il ID Pano e incollalo nel tuo editor di testo.

Ottieni il codice di incorporamento

Vai a API di Google Maps Incorpora e fai clic su Mostra Street View o un panorama personalizzato linguetta.

Posiziona il ID Pano nel ID panorama personalizzato scatola. Una volta che fai clic fuori da quella casella, la tua foto sferica verrà visualizzata nell'anteprima. Se non appare, ricontrolla il ID Pano.

La foto sferica deve essere approvata da e aggiunta a Google Maps per essere utilizzabile ID Pano.

Quando l'anteprima della foto sferica è corretta, copia il codice di incorporamento nella parte inferiore della pagina e incollalo nell'editor di testo.

Ottieni una chiave API

Rimanendo nell'API di Google Maps, fai clic su Sembra buono pulsante. Quindi fare clic sul Registrare pulsante nella pagina successiva. Registrati per un'API registrando, esaminando e accettando i termini e le condizioni. Una volta accettati i termini, verrà creato un nuovo progetto per te e verrà generata una chiave API. Verrai anche portato alla console dello sviluppatore.

Nella console dello sviluppatore, fai clic sulla chiave del browser. Sarai portato al Chiave API browser Pagina. In questa pagina, copia il Chiave API e incollalo nel tuo editor di testo.

C'è un altro campo da compilare prima di poter usare la tua chiave. Devi impostare i referrer nell'ultimo campo. Il tuo referrer sarà il tuo sito web con a jolly personaggio (*) prima e dopo di esso. Per esempio: * .Yoursite.com / * Questo dirà all'API che qualsiasi pagina su www.yoursite.com è autorizzata a utilizzare l'API. Limita inoltre altri siti dall'utilizzo del tuo Chiave API a meno che non vengano aggiunti qui.

Aggiungi il tuo Chiave API al Codice di incorporamento sostituendo il ... nel key = ... del tuo Codice di incorporamento con il tuo Chiave API.

Utilizza lo snippet di codice per incorporare

Se utilizzi un gestore di contenuti come Wordpress, crea una nuova pagina o post di blog. Quindi, fare clic su passa a HTML pulsante. Una volta in questa modalità, puoi inserire codice HTML personalizzato. Incolla il codice di incorporamento e fai clic sul pulsante Salva. È possibile tornare alla modalità normale in seguito per aggiungere qualsiasi testo o altri elementi desiderati.

Vai avanti e visualizza la tua pagina. Se la tua foto sferica appare, ottimo lavoro lo hai fatto! Se non appare, dovresti vedere un messaggio di avviso. Il messaggio di avvertimento ti dirà se hai un problema con il ID Pano o con il Chiave API. Se non appare alcuna foto sferica o avviso, il problema potrebbe essere nello snippet di codice. Copia di nuovo e incollalo nella tua pagina web.

Se stai usando Adobe Muse, fai clic su Oggetto menu e selezionare Inserisci HTML. Quindi incolla lo snippet di codice nella finestra di dialogo e fai clic ok. Trascina la casella nella posizione desiderata sulla pagina e ridimensionala a 600 per 450 pixel. Per visualizzare la foto sferica, dovrai pubblicare il sito sul Web. Quindi vai avanti e clicca Pubblicare. Una volta pubblicato, accedi alla pagina con la foto sferica per visualizzarla.

Ecco uno sguardo al mio codice di incorporamento che ho incollato nella mia pagina: