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.


1 Like

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.

3 Likes