Web content / Embed content / Map API

Hi. I’m trying to embed some kind of map to show store locations. A search on this forum showed some past discussions especially on leaflet map - but the info is stale and I couldn’t seem to get it to work.

In fact, didn’t even get that far. Tried adding a “Web content” element onto a screen - Eg. www.google.com. The google page rendered in the React Studio design tool, but when I ran it under “Opened in web browser” - I had an error "Refused to display ‘https://www.google.com’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’ ". Googled it but didn’t find any quick solution. Tried “Mobile Preview” as well to see if it works using the Neonto server, but it ran into errors building it.

Also, any idea how I would use the “Embed content” element instead of “Web content”? Does anyone have any quick sample HTML code for the “Embed content”?

Lastly, any tips on Map API would be appreciated. Thanks.

BTW, I managed to get a basic frame rendered with “Embed content” and used the simple HTML sample code from:

One step closer.

I did end up getting a map to work with a leaflet map. With multiple markers as well. Single marker is much easier - you can use Google Map Embed API for a single marker and be done with it.

Broad strokes - I took the approach of running a stand-alone leaflet map on the same host and port as node js - ie. it has its own html. Then I make a call to this map html and pass parameters in the URL for the markers’ lat / long, etc.

I’d be happy to share the details, but as you can see it’s a bit convoluted to begin with. But the actual code to be added to the React Studio generated js code is minimal aside from the stand-alone map html file. And yes, it’s not all included in the React Studio project file so you would have to “hand bomb” the js file yourself.

1 Like