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 Nov 10, 2014, 5:46 AM ]
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 couple of solutions for embedding the map within a html page, that might work for you

1. Simple HTML -- see demo http://jsfiddle.net/eB8j2/1

<div>
    <object type="text/html" data="https://googledrive.com/host/0B3cHzjGxAYvnTkdmOEZXdkJta0k/xsMapping.html?f=foglioDiLavoroFiddle.Data.json" width="800px" height="600px" style="overflow:auto;border:5px ridge blue"></object>
</div>

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

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

JavaScript section
$("#siteloader").html('<object data="https://googledrive.com/host/0B3cHzjGxAYvnTkdmOEZXdkJta0k/xsMapping.html?f=foglioDiLavoroFiddle.Data.json" />');

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