Can't display two mapbox maps on one page (using embed)

Design help Custom code
1

Morning, first post, new here, probably making a newbie error but I can’t get two different mapbox maps to display on the same page.

Have tried:

  • making sure the id names are different for each embed. Result is only one map loads, other is always blank.
  • removing all the head/html code and just using the scripts. Result is the maps don’t display at all (which is why both show the cyan boxes at the moment.)
  • checked the maps in a JSBin and they’re both working. Scrappy fix (hat tip to mapbox for the help thou, just to show the maps are good) is here: JS Bin - Collaborative JavaScript Debugging
  • exported all the code and tried to hardcode the problem out in Dreamweaver where I can get everything to work (hosting on a another server to test) but it throws the responsive layout all to heck so that’s not good, plus it takes me out of the Webflow dev environment and that’s always going to mean making a mistake somewhere down the line. Result is here: Quadriga - Meet

Here’s the project URL: https://preview.webflow.com/preview/quadrigarealestate-beta-v4?utm_source=quadrigarealestate-beta-v4&preview=2f595394c42a05aa72e7dc382194a1e1

And here’s the share link: http://quadrigarealestate-beta-v4.webflow.io/

Anyone got any ideas as I’m stuck and have burnt two days trying to fix this. Client’s also getting tetchy now :frowning:

Thanks in advance…

2

HA! HA! Fixed it! Go me…

3

@BarnBoy. Glad you figured out the fix. Curious, I’m simply having trouble getting a mapbox properly embedded into my webflow project. How did you get your to work?

1 Like
4

Any luck on getting this to work - would love to know!!