Posts‎ > ‎

How to embed a map from Mapping Sheets add-on in a web page?

posted Nov 10, 2014, 5:12 AM by Faustino Rodriguez   [ updated Mar 10, 2018, 1:36 PM ]
We often get this kind of question:
Q: Is it possible to embed the maps in a html page? what could be the specific code?

A: We have tested a few solutions for embedding the demo map within a html page, that might work for you

1. Simple HTML -- see demo http://jsfiddle.net/eB8j2/74/
<div>
    <object type="text/html" data="https://thexs-mapping.firebaseapp.com/mapping.html" width="800px" height="600px" style="overflow:auto;border:5px ridge blue"></object>
</div>

2. Using jQuery -- see demo http://jsfiddle.net/7ZM8q/26/

HTML section
<div id="siteloader"></div>

JavaScript section
$("#siteloader").html('<object data="https://thexs-mapping.firebaseapp.com/mapping.html" />');

CSS section
html, body {
    height: 100%;
}
div {
    height: 99%;
}
object {
    width: 100%;
    min-height: 100%;
}  

3. Using iFrame 
This could be another option, but we haven't tried it yet

Comments