Having issues with HTML Element (Mapmyrun)

Hey all,

Having issues with the HTML element. I am trying to input an iframe element which contains a map as well as a user created route on that map directly from mapmyrun.com. This link shows the map as well as the code that I am copying (MapMyRun).

When I copy this into the html element the route isn’t rendered, only the map and elevation chart. This is true both in the bubble editor as well as after running the page properly in preview:

I’ve copied the code to a couple other sites that render HTML and it seems to copy without issue.

This is pretty mission critical to my project, so I would greatly appreciate any help on this. Alternatively, adding the API for mapmyfitness.com to Bubble would be amazing.

Seriously thanks for all you guys have been doing, such a cool tool!

Can you share a link? Or even better, recreate the situation on the forum_app ( Open app for forum questions )

Apologies for the slow response. It’s interesting, I was able to get the map to render at one point, just missing the route on top of it. Now I am completely unable to get the map or route to render.

I’ve recreated the problem on the forum_app:

Happy holidays!

Hi Scott,

Your embed doesn’t work on Bubble because we use https (a secure, encrypted version of HTTP) and the mapmyrun embed doesn’t. You can see the embed working if you use Safari, but Chrome (which is likely what you are testing on) is very strict about these rules - as it should.

If you upgrade and get a domain, since it is plain http, you will see the embed at runtime in Chrome as well (though the editor, since it’s over https, will still not show the embed in Chrome).

Another option is to email mapmyrun and ask them to upgrade to https, which is super easy and a very good security practice.

Cheers,
George

2 Likes

Thanks George. Kind of surprising that UnderArmour/mapmyrun isn’t using HTTPS. I’ll definitely drop them an email. Planning on upgrading in the next month or so as well.

Another question that I foresee having with this, Is there a way to make HTML embeds behave like dynamic data?

What I’m trying to accomplish is to have a “Race Page” which has a whole bunch of information about races coming up (name, date, distance, etc). Eventually, I would like to have an embeddable map from mapmyrun with the course route and elevation. Obviously this would need to change for each individual race, hence the dynamic data requirement. I’m not seeing a way to put an HTML field into the data tables in bubble.

Appreciate it!
Scott

The HTML embed content can be filled dynamically, say using a block from the Blockspring plugin. It’s up to you to get the current race from mapmyrun - haven’t seen a way to do this on their site.

Is that what you were asking about?

Great! I think that’s what I’m looking for. Will need to mess around with Blockspring, I’ve really only watched a couple videos to see what all the hype for it was when Bubble announced the partnership. Seems really powerful, I just haven’t had a chance to play yet.

Regardless, I’m pretty sure that will work. I will likely be manually creating routes on mapmyrun (which I would need to do for accuracy’s sake anyways) and copy the URLs over to a googlesheet that is then synced with Blockspring. Thanks for your help!

1 Like