Write up instructions for embedding maps on other pages

[rgoj]

Summary

It'd be great to provide documentation to address issues that may arise when embedding Maptio maps on other websites.

Description

We've had a question a while back about making the embedded maps look good on other websites - when they look to small. It'd be good to explain that this needs to be done in the context of the website, e.g. by adding appropriate styling to the iframe element or adding adiv within which our iframe will be held.

Current draft

Here's what I replied with (with some newer edits), perhaps a good starting point for any instructions?

In general the iframe code is intended to be fit into a particular layout of a
page and the layout might need to be amended to achieve a satisfying result. In
general, for best results, we'd recommend you ask the designer or developer
responsible for your website to adjust the code snippet we provide to the
context in which it will be used on your website.

That said something like this code snippet might cover many scenarios:

<iframe src="<< MAP LINK >>>" style="display: block; border: none; height: 80vh; width: 100%;"></iframe>

It will force the iframe with the map to take up 80% of the height of the space
available on a user's screen. You might want to experiment with the 80vh, maybe
set it to 85vh, maybe less. You could also measure the height of the header in 
pixels and try to replace the height part of the code snippet with something
like:

height: calc(100vh - 00px);

where 200px is the height of the header. None of this is 100% ideal (e.g. the
header will change on mobile), but using something like this should hopefully
get you a long way towards a good enough solution.

Here is the issue for context: https://app.intercom.com/a/inbox/q3x5lnhp/inbox/search/conversation/106323200005311?query=embed

[rgoj]

Another recent request here (which actually prompted me to dig out what I sent before and create this issue!): https://app.intercom.com/a/inbox/q3x5lnhp/inbox/shared/all/conversation/106323200014167?view=List

[rgoj]

And here's embedding code sent previously in this support thread: https://app.intercom.com/a/apps/q3x5lnhp/inbox/inbox/4637195/conversations/106323200001884

<div style="--aspect-ratio: 1;">
  <iframe 
    src="<< MAP LINK >>>"
    style="border: none"
  ></iframe>
</div>

<style>
/**
 * Adapted from: https://css-tricks.com/aspect-ratio-boxes/
 */
[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}

@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }

  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  

  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}
</style>

[rgoj]

Here's a version that breaks out of narrow containers, to allow for descriptions to be seen:

<iframe src="<< MAP LINK >>>" style="display: block; border: none; height: 80vh; width: 100vw; margin-left: calc(50% - 50vw);"></iframe>

It's not perfect though... see more reflections here: https://app.intercom.com/a/inbox/q3x5lnhp/inbox/shared/all/conversation/106323200014167#part_id=comment-106323200014167-21895730754