Google Street View in Bubble.io

Adding Google Street View to Your Bubble App

In this Bubble tutorial video, I'm going to show you how you can add Google Street View to your Bubble app. We're going to be using the Google Street View static API, which is a fantastic way of providing an address such as this. If I say Buckingham Palace, we then get a Google Street View image for Buckingham Palace. Of course, that could work for any address around the world where there is Google Street View.

Learning Bubble at PlanetNoCode.com

But before I launch into it, if you're learning Bubble, there's no better place to go than PlanetNoCode.com where you can find even more Bubble tutorials than you can find on our YouTube channel. We've got tutorials exclusive to our members and you can only find it at PlanetNoCode.com.

Important Note on API Keys

Now, as I dive into this, if you take nothing from this video, it is if you are working with API keys and you're working with like a JavaScript API or this API that we're using here, if your API key appears on a page, you need to think about it and you need to be taking precautions about how you do that.

Using the Street View Static API

I need to underline everything I'm going to say because the API we're using is this one here, which is the Street View static API overview. You'll notice that part of the URL that makes up the image URL, which is down here, is your API key.

Security Considerations for API Keys

If you know anything about building web apps, you think, oh no, I can't put an API key in a public facing bit of code like this. Well, you can as long as you follow Google's recommended steps and best practices. I'm going to cover some of them here, but I'm just going to say it's really up to you to understand how, when, what precautions you take when using a Google API key and putting it on front page, you know, public facing or user facing content.

Setting Up Google Cloud Console

So I'm going to go into my Google Cloud console here. The first thing I need to do is set up a project in the process of doing that depending on where you are in the world. Google might insist that you add some payment details. But once you've got your project, we then need to go to APIs and search for Google View static and click on that.

Enabling the API and Creating an API Key

I've already enabled it here, but you'll see that you need to click the enable button, which will be here if you've not already enabled the API. Then depending on the onboarding process, Google might also create an API key. So we go into keys and credentials and I have an API key here that is created.

Configuring API Key Security

I'm going to go in and click edit API key. Again, don't take security advice from me. I'm not a Google web console expert. Read the documents for yourself. But this is what I think is required at the very least. So there's my API key up there. I will be deleting this after this video. But you need to add in the precautions of set application restriction to websites and then add in using the guides that we've got here.

Restricting API Key Usage

Add in your URL or your domain or your temporary domain for your Bubble app. Making sure that you don't enable it for all Bubble apps.io because that would be anyone who's created the Bubble app. Make sure it's specific to your Bubble app following the guidelines here about using wildcards or notice that there's no training slashes at the end of the domains. And then restrict it to a specific API. You don't want to be using an API key that you're using for other Google services. You just want to lock it down as much as possible.

Additional Security Measures

So I've locked it down to the specific development subdomain that Bubble gives me and I've locked it down to just the street view static API key. There's one other thing here and I'm not going to cover it in this video. But you can take a further step. And in fact, we've got it in red here. Google strongly recommends that you use both an API key and digital signature.

Implementing the Street View API in Bubble

In my Bubble app, I have a search box and I've set it to geographic places. If you launch a Bubble app, you're going to need to supply additional Google Maps API keys and put that into settings. Because I'm running this in my dev app, I'm basically benefiting from the generosity of Bubble with some of the Google Maps API access. And that's how the address search works in the search box.

Displaying Street View Images

Then for my own convenience, printing the search box's values latitude and its longitude, the reason I'm doing that is because that's how the API URL knows where I want to get the image. And then I'm just using arbitrary text to make it a bit easier to organize and to format.

Final Result and Demonstration

The end result of that is something like this. Shall we have a tower bridge? Oh, location could not be found. Okay, so it couldn't find that location. Maybe because the lat long... I don't know, what else should we try? Should we try London Eye? London Eye. Okay, I happen to use to live in London and I know that that is the London Eye but we're looking the wrong way. In fact, I reckon that those cables there are supporting it.

Conclusion and Reminder

This is a very effective way of displaying an image of an address perfect if you're developing any sort of property app or basically anything that uses addresses and you want to show your user the street view image. You can do that using the street view static API. Last bit from me, remember, protect your API keys at all costs.