My current Location - Embedded Map View

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.

Map 1

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.

3) I previewed the same in App and got a marker for my location with the exact title and icon assigned but the location is somewhere in the ocean.

P.S -
I did also check this “Embedded map view example - RpwyoNUHlL0xs1dEORpwc” but my preview app turned just a blank screen in return. I couldn’t learn from it.

Thanks in Advance.

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.

2 Likes

Thanks, It worked.

Steps I followed,

1)Created Two Pages, One to collect GPS value (Page-1) and another page to display Embedded Map (Page-2).

2)Created two App variables - Latitude & Longitude with variable type as Number.
3)On page-1 created a logic on “Page Mounted” to get GPS Location and assign its output value to created app variables.

4)Created a button on Page-1 with logic to open Page-2 on tap.

5)On page-2, Used the Embed Map View from the component market and assigned the App variables to the initial map region and markers to render.


2 Likes

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.

1 Like

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.

1 Like

Hi , thanks for this - but when I do it, the app crashes on page 2

Hi! What sort of crashing? What errors do you get in the debugger for example? What part of the logic runs before the crash?

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.

What can we do to open a map with a marker?

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.

5 Likes

Hi @JOHN_WORSHAM,
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!

1 Like

Hi, does anyone here have any idea how to zoom the map based on the lat \ lng set in the indicator?
Example: The indicator shows “Empire State Building, New York” but the map looks like this

instead I wish it looked like this:

I noticed two fields in the component home map region: LatitudeDelta and LongitudeDelta

but I have no idea how to use them. Thanks to anyone who wants to help me understand

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.

I hope that helps;

1 Like

hello, I immediately take a look at the resources you linked, Thanks!