About embedding your map in a web page?
Can I embed my map in a web page?
Technically you can, see section below on How to do that
However, let's consider first some usage implications, when including your map in a web page, either embedded or just by link
If your web page has a high traffic or demand, it might become a top referrer (using Google Analytics terms) for our Mapping web app
This might cause an excessive use of the shared Maps Api key, that the Mapping web app is using for all its users
Also increasing our costs in an unexpected way, when providing this solution
We consider excessive use any significant deviation from the user's averages
We have no plan nor intention to limit the use of our Mapping solutions, so we are considering some options to mitigate this situation and facilitate compliance with our fair usage policy, or even better to avoid this being a problem altogether.
What can we do to avoid excessive use of the Mapping web app?
Find a few notes below, as far as we know at this moment
If the map is embedded in a web page, try that page is only accessible with the user's intention to view the map.
Otherwise, avoid embedding the map in the home page
Can I use my own Maps Api Key?
Yes, this option is currently available upon request and by invitation if required
That's the ultimate solution, that allows for heavy use of the Mapping web app, without excessive use of the shared Maps Api key.
When enabled, the user just needs to get their own Maps Api key and add it within the add-on Preferences.
How to embed my map in a web page?
Find below a few solutions we have learnt from our users, for embedding the map in a web page, that might work for you
Warning: we are using the URL for the already published demo map
You must use your own map's URL published on Google Cloud Storage, as explained on this post
1. Simple HTML
see demo at https://jsfiddle.net/2whx4f89/
<div>
<object type="text/html" data="https://mapping.thexs.app/map.html" width="800px" height="600px" style="overflow:auto;border:5px ridge blue"></object>
</div>
2. Using jQuery
see demo at https://jsfiddle.net/Lwd5nkv8/
HTML section
<div id="siteloader"></div>
JavaScript section
$("#siteloader").html('<object data="https://mapping.thexs.app/map.html" />');
CSS section
html, body {
height: 100%;
}
div {
height: 99%;
}
object {
width: 100%;
min-height: 100%;
}
3. Using iFrame
see demo at https://jsfiddle.net/7bq5tsrf/
HTML section
<iframe src="https://mapping.thexs.app/map.html"
width="640" height="480">
</iframe>
General Notes
Some browser's settings or extensions might block an embedded code page, so the map fails to load
