In this Bubble tutorial video, I'm going to show you how you can add Google Street View to your Bubble app.

Demo of Google Street View Static API

We're going to be using the Google Street View static API, which is a fantastic way of if you provide an address such as this, if I say Buckingham Palace, we then get a Google Street View image for Buckingham Palace. And of course, that could work for any address around the world where there is Google Street View.

The best way to learn Bubble.io

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.

Understanding API Keys and Precautions

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. 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.

Google Street View Static API Overview

And you'll notice that part of the URL that makes up the image URL, which is down here, is your API key. And now 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.

Setting Up Google Cloud Console Project

So I'm going to go into my Google Cloud console here. And 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.

Enabling Google Street View Static API

Click on that. And then I've already enabled it here, but you will see that you need to click the enable button, which will be here if you've not already enabled the API. And then depending on the onboarding process, Google might also create an API key.

Securing Your API Key

So we go into keys and credentials. And I have an API key here that is created. 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.

Configuring API Key Restrictions

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 the application restriction to websites, and then add in using the guides that we've got here, 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 to 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, notice that there's no training slashes at the end of the domains, and then restrict it to a specific API.

Locking Down Your Google Street View API Key

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. And 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.

Understanding Digital Signatures

So 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 Google Street View in Your Bubble App

So 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.

Displaying Google Street View Images

But the end result of that is something like this. What else shall we have? 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 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.

Use Cases of Google Street View Static API

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.

Final Thoughts on API Key Protection

Last bit from me, remember, protect your API keys at all costs.