Using the map with iframes

How to insert a map into your own webpages

↩ Return to main map-making instructions

Example

The map below has been inserted into this html page using an iframe.

Use mousewheel or pinch to zoom, drag to scroll
(Keyboard focus is unreliable in iframes)


The HTML I used to display this map is:

<iframe width="390" height="410" src="https://buildingwithblocks.info/map173/iframeable.html?googlesrc=example.txt&amp;range=4800&amp;showcoordinates=true" scrolling="no" style="border: none; overflow: hidden;" ></iframe>

Or, if you were hosting it yourself: 

<iframe width="390" height="410" src="iframeable.html?src=example.txt&amp;range=4800&amp;showcoordinates=true" scrolling="no" style="border: none; overflow: hidden;" ></iframe>

Note the iframe is linking to iframeable.html rather than index.html (I've highlighted this in red). This is because iframeable.html provides the cut down version of the map specialised for use in iframes.

Choosing iframe dimensions

There are currently 3 iframe sizes available:

  • 390 × 410 — suitable for phones
  • 630 × 650 — suitable for ipads and small laptops (720p displays etc.)
  • 800 × 820 — looks best, but requires good resolution browsers such as on 1080p computers, and won't work on iPhones or iPads (see below).

The example above is 390 pixels wide.

Normally the most suitable resolution would be picked automatically, but with iframes their size is set by the page containing the iframe — which you are in control of. So you will either have to choose a size based on your intended audience, or create some sort of funky "responsive design" page.

Warning: Due to a 5-megapixel hardware limitation in iPhones and iPads, the 800 x 820 resolution will not work on iOS devices, as it exceeds 5 megapixels when fully zoomed in.

The heights are 20 pixels more than the width to allow some room for the hover-text.

Example HTML for each size

Small:

<iframe width="390" height="410" src="iframeable.html?src=example.txt&amp;range=4800" scrolling="no" style="border: none; overflow: hidden;" ></iframe>

Medium:

<iframe width="630" height="650" src="iframeable.html?src=example.txt" scrolling="no" style="border: none; overflow: hidden;" ></iframe>

Large:

<iframe width="800" height="820" src="iframeable.html?src=example.txt" scrolling="no" style="border: none; overflow: hidden;" ></iframe>

↩ Return to main map-making instructions