Services Plugins FAQs

Mapbox Maps are not loading in Popups

Plugins
#1

Hi,

Seemingly out of nowhere it would appear that mapbox maps that are located within popups are not loading. I’ve spent several hours this afternoon trying to determine why maps that were previously working fine no longer do so, on the assumption that it was somehow an error on my part.

However, after ruling out anything on my side, I ran a test and found that if I create a new page and drop a mapbox onto it, then it will load up fine. If I create a popup, place a mapbox into that, and then show the popup, it does not appear, thus proving my theory.

Conversely if I drop a regular Bubble map into the popup it loads fine, so this seems to be something on the plugins side rather than something Bubble has changed with regards to rendering maps.

This is catastrophic to my apps functionality so would appreciate a swift review and solution to this asap.

Thanks!

#2

Hello,

Thank you for reaching out!
I’ve tested it on my end, and everything seems to be working as expected. You can check the results here:

Please try replicating my setup and ensure that the map is initialized properly on your end. If the issue persists, let me know, and I’ll be happy to assist further.

Best regards,
Egor Smorodinov,
Zeroqode Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

#3

Hi thanks for the reply.

This is strange - obviously I can see that your test page works.

However I created a new app and on an otherwise blank page added a map on the page, created a popup, added a map into the popup, and simply show the popup, and it does not render.

image
image930×890 98.1 KB

image
image807×258 10.7 KB

image
image1579×879 204 KB

image
image1168×642 47.7 KB

Which is reflective of what I am seeing in my actual app where none of the maps are loading.

So think it rules out anything that I might be doing in a given app since this is a new app with nothing else on the page/no exotic actions taking place - and the parts of my app that are being effected have been untouched for months, so it is nothing I have done to alter their behaviour…

Thanks,

#4

Actually it looks like I can only get it to render if I give it fixed height/width?

Even if I have min width/height set and fit to content on each, if I do not check Fixed Width/Height, it will not show up.

This wasn’t always the behaviour as I need a responsive element to them, and as I say, they worked fine previously.

Could you look into if any changes were made in regards to layout conditions for the map elements?

Thanks,

#5

Have just applied fixed widths/heights to the maps in my actual app and can confirm that they are now showing so this is definitely the source of the issue.

#6

Hello nocodephill,
I unchecked the fixed width/height in the layout tab, and the element is still displaying on the page.

If you’re not setting minimum and maximum width and height, please ensure that the ‘Fit to content’ checkboxes are also unchecked.

Let me know if this helps!

Best regards,
Egor Smorodinov,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

#7

Hmm ok,

I’ve tried various combinations of no min width/height, along with different combinations of the parent group with/without min/fixed heights, and the only way I can get them the map to show is to give it a fixed height/width.

I can get away with it in my current situation but just concerns me that it loses the ability for maps to be responsive. Obviously you are not experiencing the same as what I am so it makes it difficult to figure out where the issue lies.

I do notice that your popup has fixed dimensions, and also that there is a separate map element of 1px in there so not sure what, if any, effect that might be having on things so its not quite a like for like comparison.

Also you have actions to add markers and zoom/fly into the map so maybe that forces rendering that otherwise wouldn’t happen. Perhaps you can try just simply having the map element there with no other actions to better try to replicate how I had it on the new page that I created the example on.

Thanks,

#8

Hello nocodephill,

Thank you for your message.

I noticed that the default Bubble map element in the popup was an artifact from another test case. After removing the element, the popup is loading as expected. I also removed the “Add Marker” and “Fly To” steps, and the map is still initializing properly. Additionally, when I removed the predefined sizes of the parent popup, the map still behaves as expected.

I understand your concerns regarding responsiveness. To make the setup truly responsive, you’ll need to use conditional expressions. These expressions will override any predefined values and automatically adjust the sizing of the elements. Having no fixed size is not a requirement for making the element responsive.

There might be a few reasons why the setup is working differently on your end compared to the test demo page:

  1. Plugin Version: If you’re using an older version of the plugin, it may behave differently than expected. Please ensure you are using the latest available version by updating it in the Plugins tab.
  2. Interfering Conditionals or Workflow Steps: There may be conditionals or workflows interfering with the element’s initialization. We recommend using the debugger in step-by-step mode to manually check for any changes in the exposed values on your webpage.
  3. Page Configuration Differences: Your page might be configured differently from the test demo page, which could lead to variations in behavior.

Let me know if you need further assistance or clarification!

Best regards,
Egor Smorodinov,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

#9

Hello nocodephill,

I hope you’re doing well.

I wanted to follow up on the suggestions I provided in my previous message. Did you manage to implement them in your app and test whether the issue with Mapbox maps loading in your popups has been resolved? If the problem persists, could you please share screenshots of your setup, workflow, and any error messages you are encountering? This will help us investigate further and assist you more effectively.

Looking forward to your response!

Best regards,
Egor Smorodinov,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3