Setup Google Maps in Bubble - Tutorial

[@cedrickerbidi4519]

Thanks for one more awesome video. Is it possible to implement an action in the WF to show a group focus when the Denver pin is clicked by the user, to display specific info about the clicked location / foodplace ?

[@NoCodeAcademy]

Hey you're welcome, you would use this Workflow Event under Elements > A map's marker is clicked and then you'll have abilities to (a) show a group focus and (b) access the data associated with whatever marker is clicked. Hope that helps.

[@cedrickerbidi4519]

@@NoCodeAcademy thanks for the reply;.. It seems there is no way to fix a group focus's position with reference to a map marker though.. can only do it with a regular group ou a popup element

[@NoCodeAcademy]

@@cedrickerbidi4519 that depends on if the height of the map group will change. If it remains static, when someone clicks you can both center the map on that marker and fix the focus group's position to have the offset you want from the map element instead of the pin. If the above idea doesn't work might be able to get creative as well to wrap the map in a group that is aligned to parent, and add another group that you "send to back" and align the focus group to that after you've centered the map on the map pins marker. If that doesn't work, you also might look into plugins from Cranford Tech on map elements.

[@pedrocdo9599]

How do I allow for that red pin to appear when someone doble clicks? I'm looking for the functionality when you right click and then pick, measure distance. And then click again a few blocks away and it will measure the distance of that street. One can do this in the regular google maps but the right click menu doesn't appear when I do it on the Bubble interface.

[@NoCodeAcademy]

Hi thanks for the comment. It's a very specific item to measure distance but you might try checking out the various plugins where developers have taken the time and effort to extend map functionality beyond what Bubble provides out-of-the-box. For example bubble.io/plugin/beautiful-maps---mapbox-1692959010232x887536901462425600 and others. Hope that helps.

[@hussamg]

Is the example is the simplest on how to use Google maps .. Thank you....I have a wider question on how to drop a pin on a map and get the location of the pin and store

[@NoCodeAcademy]

Hi @hussamg, good question. That's easier to answer in a video so here you go www.loom.com/share/541fc4b128294193b556058980f472a0.

[@ZqinZac]

Hi! Any ideas on how to remove the grey zone/tile on the map when zooming out?

[@NoCodeAcademy]

Hmm do you mean the top right grey tile? Either way, assuming you've already played with all the settings on the property settings panel for the map element in Bubble, then I don't know a readily available way to remove it. What I can say is that it's possible, using the toolbox plugin, to add some javascript code to the page when it renders and ... *now leaving the area of my expertise * ... you could work with Claude or ChatGPT to try out some code that can update only that item on the map so it displays how you want it to. Hope that helps.

[@Tahycoon]

Is it possible to display a popup with the marker location info (let's say a restaurant) just like google does when you click on a marker?

[@NoCodeAcademy]

Hi you might try zeroqode's various map plugins zeroqode.com/plugins?category=&kw=map, they do have one to display prices like on an Airbnb map. I have not personally used it but if it's possible to display prices, I'd image you could also display metadata such as if it's a restaurant, a hotel or alien embassy for intergalactic penguins.

[@krypto305]

Hello! How do I use maps element to show pickup and delivery location of a users cart item? I don't want to show live tracking, I just want to show pickup and delivery location for a cart item!

[@NoCodeAcademy]

Hi, so kind of like a start and end destination but without the journey mapped in between them? Here's one way you might do it -- if you notice in the tutorial that there are several items we're placing onto the map? And to get them onto the map, we are taking a list of the locations to get plotted onto the map? Well, you would simply need to dynamically create a list of the two spots -- pickup and delivery -- into a custom state variable perhaps and use that list as the value for the map's data. Hope that helps.

[@krypto305]

@@NoCodeAcademy Thank you! I stopped using Maps element.

[@valvaU2]

Great Work \0/ Is it possible to do something similar just with exact coordinates (lat/lng) instead of addresses. Its for historical locations. most of them have no addresses.?

[@NoCodeAcademy]

Hey, yes it is. Bubble has a built in calculation to go from geographic address to lat/lng and vice versa. So if you are saying you have the lat/lng for a bunch of historical locations, upload those into your DB (need paid plan for CSV uploads beyond a certain limit) and then you could run a calculation on those to turn them into their Google Maps geographic addresses equivalents and then once in that format, you can display them all on a map. Hope that helps.

[@valvaU2]

@@NoCodeAcademy just what i need. thx m8 :0)

[@rickyroffey]

Is there a way to easily add map clustering (for multiple pieces of geo data in one spot) to a Google map element in Bubble?

[@NoCodeAcademy]

Hey Ricky - I believe you mean this feature developers.google.com/maps/documentation/javascript/marker-clustering? I don't have personal experience but to point you in the right direction, check point #11 of plugin 19 over at BDK www.notion.so/Bubble-Developer-Kit-Plugins-3eb057d9d81d4176b1be678856c80faf#2768ebdb0b1c43d78689c7b27c726130.

[@jakbo_]

how can we have different markers for the origin and destination

[@NoCodeAcademy]

Hi good question. On Bubble's out-of-the-box map element, you can't. All the pins will have the same marker. You would need some kind of special map plugin for that. Maybe check over at zeroqode.com/plugins they have a handful of special purpose map plugins or the Bubble plugin store to find something that has expanded capabilities. I've shared something like this before that in the no code world, we stand of the shoulders of coders who have made it easy for us to do things ... but if no one has taken the time to code up a specific thing, it means you're given the opportunity to trailblaze there if you'd like.

[@rodnyabreu9488]

its possible using an image from the db in the elements.

[@NoCodeAcademy]

@@rodnyabreu9488 thanks for the comment, for the out-of-the-box Bubble maps setup, you can use only a single image that applies to all pins on the map. For more advanced Google maps configurations, try the plugins in the plugin store.

[@NoCodeAcademy]

@@rodnyabreu9488 I think this is the one you're looking for kzbin.info/www/bejne/iIPPYmZpe6d6oq8

[@charliehampson-o6t]

I get an error to ‘see javascript console for technical details’ and that ‘google maps didn’t load correctly’. I’ve tried multiple ways to fix this but my question is, do I need to upgrade from the free subscription to access this data to show pins onto a map? Thank you.

[@NoCodeAcademy]

Hi thanks for the comment, just checking do you have Google API keys added to the account?

[@charliehampson-o6t]

@@NoCodeAcademy I’m not 100% sure or how to check but I have both client and server API keys inserted into geocode and maps as well as my google account linked with bubble. Yet it still appears and I was wondering if it is because i am using the free subscription to bubble, Do i need to pay for a subscription for this to work?

[@NoCodeAcademy]

@@charliehampson-o6t yes, try the 14 day free trial. I haven't been on a free plan in years :) so am not much help in that department.

[@charliehampson-o6t]

@@NoCodeAcademy Okay thank you for the help it is much appreciated!

[@ahmedelkaffas3098]

why does the map by default loads with focus on USA ? How can we change this ?

[@NoCodeAcademy]

Hi Ahmed, the way the map works in general is to auto center around whatever is in the data source, roughly speaking. So add some items from somewhere else and it will focus elsewhere.

[@ahmedelkaffas3098]

@@NoCodeAcademy Well thats what what I did but it kept on centering around USA. However, I solved this using another plugin called "Google Maps Extended". Thanks for taking the time to reply.

[@NoCodeAcademy]

@@ahmedelkaffas3098 good to know that for the centering I'll check it out. Glad you found something that worked for you.

[@ProSimples]

But does not have the price on each pin like airbnb. :\

[@NoCodeAcademy]

Hey thanks for the comment. Yes, sadly you're right it doesn't. Have you played around with BDK's map plugin? I think they have something for putting text into the pin but I haven't personally gone that far down the rabbit hole. If you do though, let me know how it goes. Good luck!