googlewebcomponents / google-streetview-pano Goto Github PK

The documentation should be updated because the Views website is no longer supported.

Like in this example:

var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);

So, as Views went offline a year ago, streetview pano addresses don't look like this anymore:
google.com/maps/views/view/102684927602131521305/photo/1szTnskrdKIAAAGuu3fZRw

but rather like so:
https://www.google.de/maps/@-23.4411031,151.9041755,3a,75y,194.59h,71.11t/data=!3m7!1e1!3m5!1s0Gu6eoWlrurprZQlhN1K3A!2e0!6s%2F%2Fgeo1.ggpht.com%2Fcbk%3Fpanoid%3D0Gu6eoWlrurprZQlhN1K3A%26output%3Dthumbnail%26cb_client%3Dmaps_sv.tactile.gps%26thumb%3D2%26w%3D203%26h%3D100%26yaw%3D0%26pitch%3D0!7i13312!8i6656

When using the panoid part from the new url structure (3D0Gu6eoWlrurprZQlhN1K3A), I am getting CORS blocked for Googles https://geo0.ggpht.com/ domain, as no Access-Control-Allow-Origin header is present on the requested resource, and a 400 for the resource. Can anyone think of a workaround or is the element just not usable anymore?

the demo link at the beta.webcomponents page doesnt work after initially loading...

When using google-streetview-pano with iron-pages, going between pages causes this element to fail as data bindings for this.panoId and this.position have not been initialized at the time of the _mapApiLoaded callback.

In the use below, it works fine the first time I load the page, but after using iron-pages to flip between pages a second load will trigger the _mapApiLoaded callback before the _getMapPosition has had a chance to set the this.position value.

 <google-streetview-pano
            position="[[_getMapPosition()]]"
            heading="330"
            pitch="2"
            zoom="0.8"
            disable-default-ui>
          </google-streetview-pano>

This can be fixed by wrapping _mapApiLoaded contents in this.async but its a bit hacky as I don't understand why this is happening. What do you guys think?

    _mapApiLoaded: function() {
      this.async(function() {
        this.pano = new google.maps.StreetViewPanorama(this.$.pano, this._getPanoOptions());
        this.pano.setVisible(true);

        if (this.disableAutoPan) {
          return;
        }
        // Kickoff the rotating animation
        this.rAFid = requestAnimationFrame(this.update.bind(this));
      });
    },

I get errors like:
Uncaught TypeError: m[md].maps.Load is not a function
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

Any hints how best to fix?

Description

StreetView panorama does not render in Shadow DOM.
Rendering is ok in Shady DOM.

Expected outcome

The StreetView panorama.

Actual outcome

Nothing, the "map" div seems to be deleted.

Live Demo

https://jsbin.com/quyaji/edit?html,output

Steps to reproduce

• Set the dom Polymer option to 'shadow'.
• Add google-streetview-pano custom element.

Browsers Affected

• Chrome
• Firefox

Additional notes

The same result occurs when using google-map custom element and switching to StreetView, with the default control or programmatically.

A lot of its properties are re-implemented for this element.

@ebidel @addyosmani

If either of you has free time I'd love some code review. I think this element could be greatly improved by the universal loader/manager that we've been discussing. For now it requires a google-map element so it doesn't run into a situation where there are two elements both trying to load the google maps API at the same time.