Google Map Markers From Firebase

Hello,

I’m pretty new to Thunkable but having a great time. I’m creating a map that shows a list of movie filming locations all around the world. I have an Airtable set up with a list of 900+ locations.

Currently, I’ve got the map loading up in the app— but it’s taking FOREVER to load all of the locations. In fact, each time it loads a new marker, the app forces the map back to your current location. Should I be using something like Firebase instead of Airtable?

I’m also curious as to if there are some links you guys could point me to that cover the following:

  • Clicking on a marker and then having a button pop up that will allow you to jump apps to Google Maps in order to get directions.

  • Potentially only loading the markers that are in the location surrounding you/“search within this area” function. Which may speed up the load times.

Thanks so much,

Morgan

1 Like

Firebase is much quicker, and I think easier to update, however you cant have assets in there. If it is pure coordinates, then yes firebase is better.

But 900 locations is well way to much to do synchronously.

Let me think on this. I would like to see what others say about it.

1 Like

Thanks very much for your reply. Unfortunately it’s not just coordinates— I’ve got lat, lng, name, and snippet (and ideally, later, photos). I’ve got Firebase set up with my google sheets, so I can update the database through sheets— unfortunately I’m having a really tough time creating markers using Firebase.

@albert made a nifty app that maps trees, which is similar to what I’m doing. I was able to take his code and it point it towards my own airtable, but unfortunately the lag of this many locations makes the app sort of unusable. Would love to know how to modify his code to point to a firebase or maybe even the actual google “my maps” I built the locations into.

Here’s alberts great tree, uh, tree—

and here’s my Firebase DB I’m attempting to port over into said tree—

Thanks all!

I’m also batting around the idea of simply using a combination of web viewer and linking to the google map— however I might be a little paranoid and am not too stoked on the idea of folks with competing film locations app being able to just launch the map and snag all my data. Wish there was a way to simply export the markers from google maps and plug them into the map function here on Thunkable.

Bumping. Would love some help with this!

Hi Morgan,
did you have any luck whit it?
I am trying to do the same thing…

1 Like

Hi @morgan_evans. I am trying to create an app that loads the longitudes and latitudes I have saved to Airtable as map markers. I’ve hit a roadblock and am curious how you initially coded your app. Would you be willing to share your code with me? If anyone else has advice of how to do this, please let me know.

Hey @bobsunscreenbwdkp6, have you seen this? Google Map - add multiple markers

Thank you, that helps a lot! For some reason, it still isn’t working. Could you help me troubleshoot? Below are pictures of my code and the Airtable spreadsheet:


This is close to what I would do! Instead of getting a row at a time. Get all rows and save all rows to a variable. You could exchange the variable “apiReaponse” for the response from an airtable get allRows call.

First I get all my data, put those into lists, then add all the markers at once

Here, each of these


Is a different column of data

I save each rows longitude value to a variable named app -long

The same goes for each piece of info from each line of the spreadsheet

Hi @Morgan_Evans, @bobsunscreen and all the others,

try to convert the latitude and longitude explicitely from string to float like this:

grafik

Sometimes (like fetching lat/long data from a database) the variable contains a string, and then you have to convert it. Multiplying with “1.0” does no harm, but it ensures that you have the right input.

1 Like

Yes! When I run into this issue I add 0 :joy:
except when you

here is an example of that, the first arrw for value key is a number, the second arrow is also a value, but the third arrow is a value saved as a string. this is what @Michael_Rogulla is talking about.

you can fix that by going to airtable, and changing the column type to integer/number

1 Like

Sorry, I just started using Thunkable and am a beginner. Could you please explain how to adapt your code to work with my app? Thank you so much for your help!

Hi @bobsunscreen,

please have a look at my small screenshot, you can adapt it to your code. Your innermost block says “Map1 call addmarker…”. Just put in some math blocks to multiply with 1 like this:
…latitude = 1 * get property “latitude” of object value
…longitude = 1 * get property “longitude” of object value

Hope this helps?

Oh, I now understand. I changed the Airtable longitude/latitude column types to decimals and multiplied by 1 in my code. But for some reason the map markers still don’t appear when I open the app. Is there anything else I could do?

1 Like

Share your updated code with screenshots?

Sure - my code is below. I was a bit confused about organizing data into lists and then adding all the markers at the same time, so I didn’t add that into my code.

Screenshot (47)

Hi @bobsunscreen,

I would add some “debugging”:

  • insert a label on your screen, lets say at the bottom
  • begin with your location sensor. Add an “else” to your “if not error” and put the error into the label.
  • if your location sensor seems to be ok, go to airtable and perform some debugging.
1 Like

My problem is now fixed. Thank you everyone for your help!

2 Likes