Polymer Google Street View Pano

Introduction

Polymer Google Street View Pano is a Polymer element that allows you to embed a Google Street View panorama into your web pages using a simple and customizable API.

Features

• Easy to use API
• Customizable options
• Works in all modern browsers
• Compatible with the latest version of Polymer

Getting Started

To get started with Polymer Google Street View Pano, you'll need to add the following code to your web page:

<link rel="import" href="path/to/polymer-google-street-view-pano.html">
<polymer-google-street-view-pano
  latitude="37.7749"
  longitude="-122.4194"
  fov="90"
  heading="235"
  pitch="10"
></polymer-google-street-view-pano>

This will embed a Google Street View panorama into your web page, centered at the coordinates for San Francisco, California, with a default field of view of 90 degrees, heading of 235 degrees, and pitch of 10 degrees.

API

Polymer Google Street View Pano provides the following properties for customizing your panoramas:

• latitude (Number): The latitude of the location to display on the map. Default is 37.7749.
• longitude (Number): The longitude of the location to display on the map. Default is -122.4194.
• fov (Number): The field of view of the panorama, in degrees. Default is 90.
• heading (Number): The compass heading of the camera, in degrees from North. Default is 235.
• pitch (Number): The up or down angle of the camera, in degrees. Default is 10.
• disableZoom (Boolean): Disables zooming in and out of the panorama. Default is false.
• panoId (String): The pano ID of the panorama to display. Default is null, which displays the nearest panorama to the specified coordinates.

Examples

Changing the Location

You can change the location of the panorama by modifying the latitude and longitude properties:

<polymer-google-street-view-pano
  latitude="48.8566"
  longitude="2.3522"
></polymer-google-street-view-pano>

Changing the FOV

You can change the field of view of the panorama by modifying the fov property:

<polymer-google-street-view-pano fov="120"></polymer-google-street-view-pano>

Changing the Heading

You can change the camera's heading by modifying the heading property:

<polymer-google-street-view-pano heading="90"></polymer-google-street-view-pano>

Changing the Pitch

You can change the camera's pitch by modifying the pitch property:

<polymer-google-street-view-pano pitch="-20"></polymer-google-street-view-pano>

Disabling Zoom

You can disable zooming in and out of the panorama by setting the disableZoom property to true:

<polymer-google-street-view-pano disableZoom></polymer-google-street-view-pano>

Using a Specific Pano ID

You can display a specific panorama by specifying its pano ID in the panoId property:

<polymer-google-street-view-pano panoId="rRfXoCZTU-UAAAQfGF69-A"></polymer-google-street-view-pano>

Conclusion

Polymer Google Street View Pano makes it easy to embed Google Street View panoramas into your web pages using Polymer. With its customizable API and seamless integration, it's the perfect tool for showcasing locations and attractions on your website.