How to embed maps from Google Maps or Mapbox

You can add dynamic maps directly into your prototype from Google Maps and Mapbox, great for creating a more realistic experience for your end-users.

 

How to embed maps in Marvel:

  1. Hover over any image in your project
  2. Click Prototype
  3. Select any existing hotspot or click and drag anywhere on the image to draw a new hotspot
  4. Click Link to URL or embed
  5. Select Embed in the drop-down menu
  6. Paste your embed code from Google Maps or Mapbox
  7. Click Save

 

Where to find the embed code on Google Maps

  1. Click on a pin
  2. On the left-hand sidebar click Share
  3. Click Embed a map
  4. Click Copy HTML
  5. Paste the code into Marvel

 

Where to find the embed code on Mapbox

  1. Go to Mapbox Studio
  2. Click Share
  3. Copy the Share style URL
  4. Paste it into the iFrame template below, replacing the bold text

<iframe src='/path/to/your/file.html' width='100%' height='400px'>
</iframe>

Was this article helpful?
1 out of 2 found this helpful