Share
Het bekijken van een 360 ° foto lijkt bijna alsof je op de plaats staat waar de afbeelding is gemaakt, maar als een nieuwe vorm van een digitale afbeelding is het delen van 360 ° foto's nog steeds een beetje omslachtig.
In deze zelfstudie laat ik u zien hoe u Google 360 ° foto's insluit op een webpagina. Als dit de eerste keer is dat u code in een webpagina invoegt, hoeft u zich geen zorgen te maken. Al het harde werk is voor ons gedaan: we moeten slechts drie elementen verzamelen en ze samenvoegen. U hebt tijdens dit proces een teksteditorprogramma nodig om tekst of codefragmenten te plakken en te bewerken terwijl u ze verzamelt.
U kunt zoeken in Google Street View en elke 360 ° foto uit de hele wereld vinden en in uw blog opnemen. Of u kunt een 360 ° foto maken met uw smartphone of DSLR en deze bijdragen aan Google Maps. Zie mijn tutorials over het maken van 360 ° foto's met een smartphone of een spiegelreflexcamera.
Zoek de panoramafoto of het panorama op Google Maps en klik op om het te bekijken. Kopieer en plak de URL in je teksteditor. U zult merken dat de URL erg lang is en opgesplitst in verschillende segmenten die overeenkomen met verschillende stukjes data. Ergens in deze lange URL staat de Pano ID. Kijk door de URL tot je de uitdrukking tegenkomt data =. Dit is een aanwijzing van waar te beginnen met kijken. De Pano ID bevindt zich achter deze uitdrukking en tussen de tekens !1s en de volgende ! uitroepteken. Bijvoorbeeld in de string data =! 3m6! 1e1! 3m4! 1sWijofm0bDHKz2mc4rSk-dg! 2E0! 7i13312! 8i6656, de personages Wijofm0bDHKz2mc4rSk-dg zijn de Pano ID. Kopieer deze tekens naar uw teksteditor om te gebruiken als de Pano ID.
Je kunt ook het Pano ID met behulp van javascript. Gelukkig hebben sommige mensen al een eenvoudige online tool gemaakt die we kunnen gebruiken om de Pano ID. Met de Panoid-tool kun je de slepen pegman naar elke plek op Google Maps en geeft de Pano ID in de linkerbenedenhoek. Kopieer de Pano ID en plak het in je teksteditor.
Ga naar Google Maps Embed API en klik op de Toon Street View of een aangepast panorama tab.
Plaats de Pano ID in de Aangepaste panorama-ID doos. Zodra u buiten dat vak klikt, verschijnt uw 360 ° foto in het voorbeeld. Als dit niet verschijnt, controleer dan de Pano ID.
De 360 ° foto moet worden goedgekeurd door en toegevoegd aan Google Maps om een bruikbare foto te hebben Pano ID.
Wanneer de voorbeelden van de panoramafoto's goed zijn, kopieert u de insluitcode onder aan de pagina en plakt u deze in uw teksteditor.
Logeren in de Google Maps API, klik op de Ziet er goed uit knop. Klik vervolgens op de Registreren knop op de volgende pagina. Registreer voor een API door u te registreren, te bekijken en akkoord te gaan met de algemene voorwaarden. Zodra u akkoord gaat met de voorwaarden, wordt er een nieuw project voor u gemaakt en wordt een API-sleutel gegenereerd. Je wordt ook meegenomen naar de ontwikkelaarsconsole.
Klik in de ontwikkelaarsconsole op uw browsersleutel. Je wordt meegenomen naar de Browser API Key Pagina. Kopieer op deze pagina het API sleutel en plak het in je teksteditor.
Er is nog een veld dat moet worden ingevuld voordat je je sleutel kunt gebruiken. U moet verwijzers instellen in het laatste veld. Uw verwijzer zal uw website zijn met een wildcard karakter (*) ervoor en erna. Bijvoorbeeld: * .Yoursite.com / * Hierdoor weet de API dat elke pagina op www.yoursite.com de API mag gebruiken. Het beperkt ook andere sites van het gebruik van uw API sleutel tenzij ze hier worden toegevoegd.
Voeg uw ... toe API sleutel naar de Embed code door de ... in de key = ... van uw Embed code met uw API sleutel.
Als u een contentmanager zoals Wordpress gebruikt, maakt u een nieuwe pagina of blogpost. Klik vervolgens op de overschakelen naar HTML knop. Eenmaal in deze modus kunt u aangepaste HTML-code invoegen. Plak in de insluitcode en klik op de knop Opslaan. U kunt later terugschakelen naar de normale modus om tekst of andere elementen toe te voegen die u wilt.
Ga je gang en bekijk je pagina. Als je 360 ° foto verschijnt, goed gedaan, heb je het gedaan! Als dit niet verschijnt, ziet u een waarschuwingsbericht. Het waarschuwingsbericht zal u vertellen of u een probleem hebt met de Pano ID of met de API sleutel. Als er geen 360 ° foto of waarschuwing verschijnt, is het probleem mogelijk in het codefragment. Kopieer het opnieuw en plak het in uw webpagina.
Als u Adobe Muse gebruikt, klikt u op de Voorwerp menu en selecteer Voeg HTML in. Plak vervolgens uw codefragment in het dialoogvenster en klik OK. Sleep het vak naar de gewenste locatie op je pagina en verklein het naar 600 bij 450 pixels. Als u de 360foto wilt bekijken, moet u de site op internet publiceren. Dus ga je gang en klik op Publiceren. Zodra dit is gepubliceerd, navigeert u naar de pagina met de 360 ° foto om deze te bekijken.
Hier is een blik op mijn embed-code die ik op mijn pagina heb geplakt:
Accentsconagua