How to properly add Google Streetview?

Hello Everyone,

So I’m trying to add Google Streetview to my app through the Google Maps Javascript API (since all the available plugins only use the static image and I want the user to be able to look around in streetview).

I’ve been trying to implement it using an HTML element, but to no avail. I’ve made a blank test page and placed the HTML element in there, with the following code inside:

<div id="street-view"></div>

<script>
  
var panorama;
function initialize() {
  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'),
      {
        position: {lat: 37.869260, lng: -122.254811},
        pov: {heading: 165, pitch: 0},
        zoom: 1
      });
}
</script>


<script
    src="https://maps.googleapis.com/maps/api/js?key=[MY API KEY REMOVED FOR PRIVACY PURPOSES]&callback=initialize">
</script>

I’m really not sure what the problem is, as once the page loads, nothing displays. I’ve double checked my API key and it’s fine, the code seems good to me as well. The console displays no errors, only the following warning which I don’t fully understand:

a promise was rejected with a non-error: [object String]

I also ran the code in JSFiddle and it runs without any problems. I’m not sure if this is what is causing the issue, but other than this warning message, I see no obvious reason why it shouldn’t work. Any help on this is really appreciated!

Thanks in advance!

Hey @amar.sehic,

Go to Settings > General > General Appearance > Check “Expose the option to add an ID attribute to HTML elements”

Then at the very bottom of the property editor for the HTML element, you’ll see a new option for “ID Attribute”. Enter “street-view” there and remove the div from your code. Meaning, just have the code inside your script tags.

That should do it.

is-2017-11-02-09-56-00-075

Property Editor:

is-2017-11-02-09-56-31-863


Gaby | Coaching Bubble
Private coaching, courses, and tons of free resources

1 Like

Hey romanmg,

Removing the div tag and just giving the HTML element an ID worked. Thank you very much for the solution. However, now I have I different problem once I want to implement it outside the test environment.

This is the problem, I have a page with a map, markers that can be filtered by certain categories on the map and I would like to display the street view associated with the address of the marker once it is selected. This works for every marker, but once I filter the markers and update the map, the markers disappear.

I’ve looked through Bubble and the map is reading the correct addresses to display, so I think it’s an issue with the API. I opened the console and I think this problem is happening because there are two instances of the API running:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

So my question is, how do I avoid including the API multiple times? Is it possible to expose bubble’s API to send my streetview function as part of the API callback? Or would I have to remove Bubble’s map and implement my own map along with the streetview? Or is there some third and quicker way?

Any suggestions are appreciated. Thank you!

Use the Google map API plugin. It will return street view image for you.

Unfortunately the (current) Google map API plugin is too simple for this use case as it only returns a static image. I would like to display the interactive streetview with navigation. I can do this in an isolated page but it runs into conflicts with Bubble’s built in Map element.

This topic was automatically closed after 70 days. New replies are no longer allowed.