How to Use Search Element to Display Single Map Marker On Google Maps

Introduction to Maps Element and Geographic Data Type

This video is an introduction to using the Maps element in Bubble and using the geographic data type. I'm going to be putting a map into this column here. Let's make it 100 percent. I'm going to give it a slightly bigger height. Then into this column, I'm going to just so I can really quickly display a single point and demonstrate this to you. I'm going to be using a search box, and changing this to geographic place.

Understanding Geographic Data in Bubble

When you're dealing with geographic data, you're not passing in a text field, you're passing in a particular field that holds geographic data. Bubble calls it geographic address. If you are taking an address or want to store it in the database, you want to store the whole thing as a geographic address. 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. Just a heads up there, but to demonstrate how to pass data onto the map, I'm going to do it the simplest possible way.

Setting Up the Map Display

Just make that 100 percent. 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 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.

Testing the Map Functionality

Let's test that out. Let's go for London. This drop down list here, that's being generated by the Google Maps API. When you launch your 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.

Understanding API Limitations in Development

When you're testing it like I'm doing here in the development version of a Bubble app, Bubble does provide you with a limited number of requests to the Google Maps API, like 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.

Final Testing and Conclusion

So if I type in London, it 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.