Showing Map Markers from a list of Latitude, Longtidue data!

[medialution]

HI,

instead of using the geographic address field I’d like to show markers on specific locations defined by a list of Long/Lat data.
Anybody tried this yet? Appreciate every tip on how to do it?

Best

Raik

[boston85719]

Leafy Maps (new free plugin)

I’m happy to present a new flexible and powerful map plugin for Bubble! It’s made of a map engine called Leaflet that coordinates everything and the ability to get maps from different providers, right now they’re Mapbox, Stadia and Openweather (provides an overlay to the maps). The map engine is free to use, both in price and in license and the map providers have generous free tiers. Choose one or more! Check them out and make sure you grab an API key from each and also enable your domain wit…

This plugin requires lat/lng for location markers.

If you want to use google maps you can use the calculate formula coordinates to geographic address to turn your coordinates into a geographic location.

[chrisstrobl]

Hi @medialution,
as mentioned on my YouTube channel, there might be a solution with setting markers via the Google Maps Extended plugin and then calculate formula, coordinates to address.

I added a Loom video in to describe the workflow. This workflow worked for me all the time; while adding the markers directly to the Bubble element caused some problems with automatically transforming the coordinates to an address.

Best,
Chris

NoCodeGermany (🇺🇸 EN subtitles)

[medialution]

Awesome Chris … works perfect. That was really helpful. Would highly appreciate to get in contact with you to share our experience with NoCode Apps!

[sudsy]

@medialution

instead of using the geographic address field I’d like to show markers on specific locations defined by a list of Long/Lat data.

Hi @medialution ,

Just to add to the discussion… Bubble (via Google) will automatically reverse-geocode lat/lon values formatted as a comma-delimited string for a geographic address data type.

Here, I’m using Bubble’s native Map element and simply copying and pasting lat/lon values into an input. Clicking the button creates a “thing” of type Building which has an Address field of type geographic address.

 
 

 
 

 
 
-Steve

---

Premium Bubble Plug-Ins

[medialution]

Hi @sudsy - this actually doesn’t work for me. The LAt/Lon gets still converted somehow and the Marker shows up in the wrong place. Close … but not exactly where its supposed to be.

[sudsy]

Very odd. I was copying values directly from the Google Maps website. I wonder if your values are in a different datum.

EDIT: Actually, I now see what you mean! When I zoom in closer, it’s kind of hit and miss. I guess I was zoomed too far out to have noticed it before. Not sure what’s going on there, but it seems some precision is being lost.

[sudsy]

Ahh, I think I understand what’s happening here. Reverse geocoding converts coords into an address, so Google is just picking what it considers to be the nearest recognizable “address”. IOW, it won’t necessarily be exactly the location represented by the coords, but rather some nearby address that Google recognizes.

Honestly, I just noticed Bubble’s auto-reverse-geocoding behavior while working on a recent non-Google map project. I’ve never actually used the capability in an app. In fact, I had to go out of my way to avoid using Bubble’s geographic address data type altogether, because I needed precise lat/lon position. I wound up storing the lat/lon values as actual “number” data types for use with Mapbox (not GMap).

Oh well, I guess the auto conversion is not quite as useful as it otherwise might be.

-Steve

[boston85719]

I think this might be similar to what I experienced

http://forum.bubble.io/t/accurate-address-using-coordinates/101733?u=boston85719

@medialution If you application is going to be map heavy and use a lot of addresses keep in mind google will charge you for API usage when using the calculate coordinates formula. If you don’t expect much usage for this, then using Google shouldn’t really cost too much.

Google Maps API Pricing

I’ve dug into the google FAQ more ( wow there is tooo much information on these pages )…based on the snippet from my google search I found this [58%20PM] This is obviously a reference to the fact that they give a $200 monthly credit. Which is why they say $6.67 a day for 30 day span. What I am confused about now is, Is the $200 credit for each API? Meaning I have geolocation and maps and places API…does each get $200 a month credit for a total of $600, or is it $200 total to be used across …

If you are going to be map heavy and use a lot of markers etc. you should definitely check out the leafy plugin and ensure you are building your platform out from the beginning in a way you will use it in production. I made the mistake of not being fully informed about the costs of using Google API and built out an entire map based search results page, only to have to redo it again using the leafy plugin to avoid the pitfalls of the high costs of Google API.

[sudsy]

@boston85719

I think this might be similar to what I experienced

Yeah, I’m almost certain that’s what’s going on. It’s not that the Bubble Map element is unable to position the markers precisely; rather, the Google API that Bubble is using behind the scenes is doing reverse-geocoding by default. The behavior makes perfect sense in this light. In fact, I seem to recall making a mental note of that when doing some console sleuthing early in that map project I mentioned.

-Steve