Create Popup When Map Marker is Clicked

Hi!

How do you create a styled popup window to display when a user clicks on a map marker. Right now when a user clicks on a maker, you can only see all inputs together and not styled.

I have gotten as far as workflow -> When Google Map Marker is Clicked

I have been searching for this for awhile and can’t figure it out.

Thanks anyone willing to help, I greatly appreciate it.

Can you recreate this in the Forum app? im not sure what you mean

Thanks for responding quickly Dave! When a user create a marker I want to be able to style the marker caption. See image below on how google styles captions when you click on other parts of the map. I can’t figure out how to create a workflow for this. Thanks!

You put this in the Map fields like this …

But there no formatting or images, you just have text.

Also, read this Image in Google Map Marker and Making it Clickable?

1 Like

Thanks everyone! Emmanuel, I read that post and was a littlle confused how to build the workflow @NigelG was referencing.

Is it possible, instead of opening a marker caption when a marker is clicked, to open up a popup which would display dynamic text? From what I can see, when I input what Nigel referenced above, all the info will only display on one line. Looking to create more of a format to what google maps does (don’t need images though). The best way I think think to do this is in a popup.

The information in the popup would be from a forum a user filled out. It would have multiple lines of dynamic text and would potentially include an upvote/downvote feature on the popup.

Thanks so much everyone, this has been a tremendous help. Really enjoying Bubble.

Yes, you can do it two ways.

The caption (as above) is limited to text, so turn that off.

You can run a workflow when the marker is clicked (see my reply in the thread Emmanuel linked) and that could open a popup. You will probably need to do some fiddling to get a single thing sent to the popup, but is certainly possible.

I can put something in the forum app if that will help.

1 Like

Hi @NigelG could you please put something in the forum app, I am still struggling. It would be very helpful.

Thanks!
Matt

If you could, specifically how to retrieve the data from the selected marker and display that info in the popup.

If a user filled out a forum with the geolocation and information about that location. I want to be able to display on the popup:

  1. The user that posted the info
  2. The location
  3. The information
  4. The date and time it was posted

Again really appreciate any feedback!

Here we go.

I haven’t done User, but you would just pull back Creator from locationDetails.

If you wanted the popup over the map, you could use a group instead.

2 Likes

Dear Nigel,
I tried to understand provided application with popups on the map, but I can’t repeat the same in my application. My popup (as well as group) are empty, and I can’t learn your popup’s editor, because it’s hidden. I would be grateful, if you explained more deeply, how did you manage to include different fields of data to show at the popup?

It is in the forum app, so should be accessible.

So you set the popup to have a type the same as you map markers.

And then when a marker is clicked, you send the marker’s thing to the popup and show it.

1 Like

Hi Nigel! Thank you for all the help you provide to this Forum. Why cant i find any documentation about the title window? Where do i find it? is it an element?

@NigelG Agreed!!!

Hello guys.

I’ve created a popup that appears every time you press a marker in the map. In the popup some information appears related to place in the marker and i’ve added a button which which i want it to send the user to that location profile page within the app. Think of it like airbnb where if you press a marker in the map a popup shows up and if you click on it it sends you to that house page. The question is I’m not really understanding how to send the data from that marker to the page the popup is redirecting the user. Any ideas guys? @NigelG

So you will send the data from the marker > popup (am assuming your popup has some reference to the thing you clicked on)…

And then you set up the “receiving” page to have a type of the same thing. And then when you do your navigate you “send” the thing from the popup to the new page.

Hope that makes sense ?

can you elaborate more on that pls. the idea is lets say the marker is a business which has a set of different information. On the popup only certain information from that business shows up and then when you click a button in the popup the page for that same business opens up with all the information attached to that marker ( which is indeed a data type). That ‘thing’ you say i don’t really understand it

I did something special around this, i also tried to make the pop up pop in an animated way (fadeoutin). Any one know any video recorder for pc, i can post some helpful videos. here is a picture.

Hi @essieni07, were you able to post a link a video? I would love to take a look as this is what I am looking to do. thanks!

2 Likes

Hey all, I am new to bubble.io an inclined to simple solutions :wink: The workflow that worked for me was: “When Map A’s marker is clicked” / show popup event. Then in the popup group itself, I set the datasource as Map’s current marker / and displayed Map’s current marker’s data field