1

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 .

2

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
1 Like
3

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?

4

This way:

image
image849×641 174 KB

And it gives you that:
image

5

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

6

Ah sorry you mean Street view like this?

image
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>
1 Like
7

Really thank you.