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>

</div>

2. Using jQuery

see demo at https://jsfiddle.net/Lwd5nkv8/

HTML section

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

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

Report abuse