This video is an introduction to using the maps element in Bubble and using the geographic data type.

So I'm going to be putting a Map into this column here. Let's make it 100%. And give it a slightly bigger height and then into this column, I'm going, to just really quickly display a single point and demonstrate this to you.

Search element

I'm going to be using a Search Box.

And changing this to geographic place. So when you're dealing with geographic data, you are not passing in a text field. You're passing in a particular field that holds geographic data. Bubble calls it geographic address.

Geographic place & geographic address

So if you are taking an address or wants to store it in the database, you want to store the whole thing as a geographic address. And what Bubble does is it works with the Google Maps API to basically change your text address into an address which can then be plotted on a map. So just a heads up there.

But to demonstrate how to pass data on to the map, I'm going to do it the simplest possible way. Just make that 100% and then my map is going to display a single marker and it's displaying my search box. It's the search box value because. I told the search box to... like a data type to look for geographic places it's passing across a geographic address. Whereas the place name is just going to be part of the address as a text format and it won't work with your map element.

Google Maps API in Bubble

So let's test it out. Let's go for London. This drop down list here, that's being generated by the Google Maps API and when you launch app on your own domain, you're going to need to set up your own Google Developer account and plug in the API that you activate through your account into your Bubble app.

When you're testing it, like I'm doing here in the development version of a Bubble app and Bubble does provide you with a limited number of requests to the Google maps API through their accounts, through their ownership. But they rate limit that. The reason being because there is a small charge involved for looking up an address and these details through the Google Maps API.

So if I type in London works.

There, type in Paris, works there.

So that's it for this video but I will be giving a demonstration of how to show multiple map points in a future video.