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

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

Can I use my own Maps Api Key?

Yes, this option is under beta-testing and currently available upon request

That's the ultimate solution, that allows for heavy use of the Mapping web app, without excessive use of the shared Maps Api key.

We are already working on (testing) this alternative, and it will be as simple as you getting your own Maps Api key and adding it within the add-on Preferences.

p.s. we will update this post when this option becomes publicly available

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 demo map, you must use your own map's Url that includes your map file ID in your Google Drive

1. Simple HTML

see demo at https://jsfiddle.net/2whx4f89/


    <object type="text/html" data="https://mapping.thexs.app/map.html" width="800px" height="600px" style="overflow:auto;border:5px ridge blue"></object>


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">


General Notes