Hi, I would like to know, how to get my location displayed using an embedded map view component. I have attached my process below. Currently, My location is shown somewhere in the ocean. Please rectify my mistake and guide me through the process.
My Process - What I did so far
1) Created two-page variables Latitude & Longitude. Then used the GPS location function to get my current location and passed its outcome to page variables.
2) I assigned 8 out of 9 properties of Embedded map view (beta) 1: Markers to render. I couldn’t figure out what data to assign for payload property. But the rest of the properties were assigned. The (my current location received from GPS location as) Latitude and Longitude page variables are assigned to Map view properties.
The Map component still can’t update it’s location programmatically (on the todo list), which means that you need to have the location known before mounting the map. In this example it shows that you mount the page and then get gps and then update the coordinates to the map which is not going to work yet.
workaround would be to open a page with the map with the gps coordinates as parameters so they’re known on mount time.
Is there a way to pull address into the page? If the map function uses lat/lng, we should be able to also retrieve “formatted address” from the Google Maps API. Been trying to do this for a few days. Would appreciate any help.
Hi, On previewing the above given process in the app, it shows the designated icon on your exact location in the map view which has names of street and other information on it. But i do not know the exact way to get the address displayed on text. Here are few websites that may help you to retrieve location data from Latitude and Longitude.
I can say that using page parameters, markers are not shown correctly (I can see that the label of the marker is “title” instead of the value of the variable and the marker is in the middle of the ocean, position 0,0). I tried with app variable, now the label is named “map.title”… If I use a formula (appVars.map.title), it turns to blank.
Page parameters have no problems in setting the initial map region (seem that numeric text is accepted there, I had to use a formula on markers - I have tried with params.latitude, NUMBER(params.latitude), STRING(params.latitude), REPLACE_ONE(params.latitude, “.”, “,”), all seem to be the same.
If you are just wanting to display a single point marker position, there is an alternative way to display a map… After I became frustrated with the limitations and problems of the embedded Map View component I decided to just go directly to Google.
I use a Webview Component with this URL formula: “Google Maps” + STRING(pageVars.PAGE_Latitude) + “,” + STRING(pageVars.PAGE_Longitude)
Although I cant label the red marker with a name (i havent figured if thats possible via url query) it otherwise works just like I expect a map to work with no hassle.
This may be a better alternative solution for some people here.
Thank you for the tip. I have a follow-up question as it seems that you have played around with the embedded map view component. I want to track the geolocation of various users (delivery riders) and put them as markers (after starting the geolocation poller) on a map so that I can monitor them as an admin. I have tried different ways to show multiple pins on the embedded map, but I could not figure it out. Do you think it is not feasible to do so in the current embedded map functions? If not, what is the best way to show multiple pins I’d appreciate it if you could provide some insights based on your vast experiences on Appgyver. Thank you!
Hello, albeit I am not answering your question directly I can point you to relevant and public resources that can help understand what do do.
This blog of mine has all the mapview logic pointers:
You may have wondered how to provide a zoom value for the map view. With React Native things may get a bit messy and confusing especially when it comes to understand a rather cumbersome concept of latitude and longitude delta.