Cómo incrustar Google Photo Spheres en tu blog o sitio web

Ver una esfera fotográfica es casi como estar parado en el lugar donde se tomó la imagen, pero, como una nueva forma de imagen digital, compartir esferas fotográficas es todavía un poco engorroso.

En este tutorial, te mostraré cómo incrustar esferas de fotos de Google en una página web. Si esta es la primera vez que inserta código en una página web, no se preocupe. Todo el trabajo duro se ha hecho por nosotros: solo necesitamos reunir tres elementos y juntarlos. Necesitará un programa editor de texto abierto durante este proceso para pegar y editar fragmentos de texto o código a medida que los recopila..

Encuentra o crea una esfera de fotos

Puedes buscar en Google Street View y encontrar cualquier esfera fotográfica de todo el mundo e insertarla en tu blog. O puede crear una esfera fotográfica con su teléfono inteligente o réflex digital y contribuir a Google Maps. Vea mis tutoriales sobre cómo crear esferas de fotos con un teléfono inteligente o una réflex digital..

Encuentra el número de identificación de Panorama

Encuentre la esfera o panorama de la foto en Google Maps y haga clic para verla. Copia y pega la URL en tu editor de texto. Notará que la URL es muy larga y está dividida en diferentes segmentos que corresponden a diferentes bits de datos. En algún lugar de esta larga URL está el Pano ID. Mira a través de la URL hasta que encuentres la expresión datos =. Esta es una pista de dónde empezar a buscar. los Pano ID Se encuentra después de esta expresión y entre los caracteres. !1s y el siguiente ! punto de exclamación. Por ejemplo, en la cadena data =! 3m6! 1e1! 3m4! 1sWijofm0bDHKz2mc4rSk-dg! 2e0! 7i13312! 8i6656, los caracteres Wijofm0bDHKz2mc4rSk-dg son los Pano ID. Copie estos caracteres a su editor de texto para usarlos como Pano ID.

También puedes extraer el Pano ID utilizando javascript. Afortunadamente, algunas personas ya han creado una herramienta en línea simple para que la usemos para agarrar el Pano ID. La herramienta Panoid te permite arrastrar el pegman a cualquier lugar en Google Maps y devuelve el Pano ID En la esquina inferior izquierda. Copia el Pano ID y pégalo en tu editor de texto.

Obtener el código de inserción

Vaya a Google Maps Embed API y haga clic en Mostrar Street View o un panorama personalizado. lengüeta.

Colocar el Pano ID en el ID de panorama personalizado caja. Una vez que haga clic fuera de ese cuadro, su esfera de fotos aparecerá en la vista previa. Si no aparece, compruebe dos veces Pano ID.

La esfera de fotos debe ser aprobada y agregada a Google Maps para tener un uso Pano ID.

Cuando la esfera de la foto se muestre correctamente, copie el código de inserción en la parte inferior de la página y péguelo en su editor de texto.

Obtener una clave API

Permaneciendo en la API de Google Maps, haga clic en el Se ve bien botón. Luego haga clic en el Registro Botón en la página siguiente. Regístrese para obtener una API al registrarse, revisar y aceptar los términos y condiciones. Una vez que acepte los términos, se creará un nuevo proyecto para usted y se generará una clave API. También te llevarán a la consola del desarrollador..

En la consola del desarrollador, haga clic en la tecla de su navegador. Serás llevado a la Clave API del navegador Página. En esta página, copie el Clave API y pégalo en tu editor de texto.

Hay un campo más para completar antes de que pueda usar su clave. Tienes que configurar las referencias en el último campo. Su referente será su sitio web con una comodín personaje (*) Antes y después. Por ejemplo: * .yoursite.com / * Esto le dirá a la API que cualquier página en www.yoursite.com tiene permiso para usar la API. También restringe a otros sitios el uso de su Clave API a menos que se agreguen aquí.

Agrega tu Clave API al Código de inserción reemplazando el ... en el clave = ... de tu Código de inserción con tu Clave API.

Utilice el fragmento de código para incrustar

Si está utilizando un administrador de contenido como Wordpress, cree una nueva página o publicación de blog. Luego, haga clic en el cambiar a HTML botón. Una vez en este modo, puede insertar código HTML personalizado. Pegue el código de inserción y haga clic en el botón Guardar. Puede volver al modo normal más tarde para agregar el texto u otros elementos que desee..

Ve y mira tu página. Si tu esfera de fotos aparece, ¡buen trabajo lo has hecho! Si no aparece, debería ver un mensaje de advertencia. El mensaje de advertencia le indicará si tiene un problema con el Pano ID o con el Clave API. Si no aparece ninguna esfera de foto o advertencia, el problema puede estar en el fragmento de código. Cópialo de nuevo y pégalo en tu página web..

Si está utilizando Adobe Muse, haga clic en el Objeto menú y seleccione Insertar HTML. Luego pegue el fragmento de código en el cuadro de diálogo y haga clic en DE ACUERDO. Arrastre el cuadro a la ubicación deseada en su página y cambie su tamaño a 600 por 450 píxeles. Para ver la esfera fotográfica, deberá publicar el sitio en la web. Así que adelante y haga clic en Publicar. Una vez publicado, navegue a la página con la esfera de la foto para verla..

Aquí hay un vistazo a mi código de inserción que pegué en mi página: