How to Embed Large Panoramas in your Website

Published in: Embed

The iOS 6 software update adds a new Panorama mode to your iPhone’s camera. Just tap the camera icon, choose Panorama under Options and pan the camera slowly from one side to another to create a high-resolution panoramic photograph. Here’s a sample panorama of my office captured* with an iPhone camera.

iPhone Panorama Image

Embed High-Resolution Panoramas without Resizing

These panoramic images are around 8640 x 1881 pixels in size and thus too big to fit into regular websites. You can either resize the images for embedding or use one of the following techniques to embed them the panoramas at their original resolution:

Option #1: You are very familiar with Google Maps and wouldn’t be nice if you can use the same interface to embed panoramas instead of maps? Fortunately, the Google Maps API allows such creative uses and you can build a Google Maps based viewer for your panorama in seconds - refer to this detailed tutorial.

Option #2: You can also embed panoramas in your web pages using jQuery. Before you skip this technique assuming it to be too technical, take a look at this online demo - this is done in jQuery and if you were to put this into your own blog or website, all you have to do is unzip this file and replace the image URL with your own.

Here are some good Javascipt based techniques (no Flash required) that will let you embed panoramas in web pages:

  • Panorado JS – This is an HTML5 Panorama viewer with tons of options to customize the viewer. Free for personal use.
  • Cyclotron – Simple jQuery plugin for adding panoramas with support for horizontal dragging but no on-screen controls.
  • TouchPanView – Lets you fit any large image into a giving div and visitor can use the mouse or touch gestures to interact with the panorama. IE and mobile friendly.
  • Panorama Viewer – Another jQuery based panorama viewer but one offers auto-scroll in the horizontal direction. No option for vertical dragging.

Overall, I would give the maximum points. It supports high-resolution images of virtually any size, there are no licensing restrictions, the panorama viewer is quite beautiful and its bandwidth friendly too.

PS:While iOS 6 is available for the iPad as well, the Panorama mode is only available for the iPhone and iPod Touch.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Embed

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube