Google Map integration

lopez.jonathan0401 · 2024-10-01T05:08:30.401Z

Hello Bubblers. I need your help.

Now I am doing Google Map integration. I have to implement this feature.
There are the input component and Google Maps.
When I input the address into the input field, I have to show the area in Google Map. (street, houses, roads and …)
Help me please.

Thank you.
@lopez.jonathan0401 .

eliot1 · 2024-10-01T07:04:42.050Z

Hi @lopez.jonathan0401

You need:

a searchbox component with Choice Style setup to Geographic Places
a map element with a single marker with marker address setup to the searchbox value
Setup the API key in the Settings > General tab. To get your API keys from the Google Developers Console you can follow the official bubble tutorial

lopez.jonathan0401 · 2024-10-01T07:15:23.877Z

Hi @eliot1 . Thank you for your kind reply.

Could you let me know how can I set the place for Map View (street, houses …) from searchBox’ s value?

eliot1 · 2024-10-01T07:48:45.491Z

This way:

image849×641 174 KB

And it gives you that:

lopez.jonathan0401 · 2024-10-01T07:54:06.106Z

Yeah, I know that. But I mean detail address. As I mentioned above, I need to show the street, houses(apartments, humans, cars …)

eliot1 · 2024-10-01T08:17:15.000Z

Ah sorry you mean Street view like this?

image1143×719 109 KB

Steps:

add the maps embed api to your google dev console project and make sure to check the restriction api on the server key side
Use an html block with display as an iframe checked and this code:

<iframe
  width="1080"
  height="600"
align="center"
  style="border:0"
  loading="lazy"
  allowfullscreen
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/streetview?key=[GoogleMapAPIKEY]&location=[searchbox value latitude], [searchbox value longitude]">
</iframe>

lopez.jonathan0401 · 2024-10-01T15:10:56.584Z

Really thank you.