Map problem! US States are displayed incorrectly

Hello,
I’m creating a map, which draws locations from a database and drops a pin at each location.

It works mostly fine, but there are some anomalies.

If I enter “California” as the location, bubble places the pin in the centre of the US and in the database swaps the State’s name for “United States”.

Also, if I want to show a pin at New York State, bubble substitutes it for New York, NY, USA.

It works fine with many other US States, like Alabama, Texas, etc. but so far I’ve stumbled upon these issues.

Any ideas?

Thanks very much!

If you can share a few screenshots of your setup (or a direct link to your app) that would help in sharing solutions.

To check, are you saving your data in the database as the type “geographic address”? Based on what you shared, it sounds like you are saving addresses as text strings.

Bubble does a bit of heavy lifting (via the Google Maps API) to convert raw data into an actual address. (Ie. “New York” is not a proper address, but New York, NY USA is).

If you want to display specific content from an address, you can use the “extract” function. This video will introduce you to the concept.


Dan (creator of LearnTo - 15+ hours of Bubble tutorials and live coaching)

Hi Dan, thank you very much for your reply! Yes, I am saving the data as geographic location. The really odd thing is that the error only happens in the development version. If I switch to live, the names of US states get recognised correctly. In the meantime I have two other questions :slight_smile:
I’m adding a pop-up with repeating group to display info from the database that corresponds to the clicked placemark. However, in full screen mode of the map the pop-ups are not shown, only when I exit full screen. This kind of makes sense. Is there way to enable pop-ups in map full screen mode as well, OR is there a way to disable full screen mode on the map?
Here’s the dev version: https://global-ai-regulation.bubbleapps.io/version-test/map
Thank you very much!

Re: disabling full-screen mode or enabling popups to to appear on full screen, (as far as I know), that is not possible with Bubble’s basic map.

Re: database items not showing up between test and live, are you sure the data in your test database versus your live database both has properly formatted addresses?

Hi Dan,
thank you very much for the replies, very helpful! In the meantime, I realised that the data issue was that bubble uses separate databases for the live vs the developer versions of the app. Which is kinda strange, but now I know!

I see that it’s not possible to use custom map styles to disable things like controls, etc. so the functions listed here can’t be applied to the built-in map: https://developers.google.com/maps/documentation/javascript/controls

In that case, is it possible to embed a custom map but still let it display placemarks resulting from bubble queries?

Thank you again!

@imre.bard - this lesson from LearnTo expands on the difference between development and live databases. You may find it helpful to watch.

I suggest pinging some of the people with a bit more Javascript within Bubble experience for input on disabling components of Bubble’s built-in map. (I don’t claim enough expertise to offer a solution there). @gaurav - perhaps a good opportunity to build a plugin expanding on Google Maps embeds within Bubble?

Hey @dan1,
Thanks for the suggestion. Will take a look and hopefully add to my list (can’t commit at the moment though) :smile:

Cheers,
Gaurav

1 Like

hey guys, we have recently published a plugin that extends Google Maps embedded in Bubble, I though it might come handy to share the link here https://zeroqode.com/plugin/bubble’s-google-map-extender-1542622852689x155374801563418620
Thanks

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.