The Embedding API: Difference between revisions
(Note support for responsive design) |
No edit summary |
||
| Line 19: | Line 19: | ||
The src link can include an [[Map_Annotation|annotation overlay]] or positioning fragment. | The src link can include an [[Map_Annotation|annotation overlay]] or positioning fragment. | ||
===HTTPS=== | |||
Note that if your page is served using HTTPS, you will also need to use https to retrieve the map, otherwise users will receive messages warning about mixed and unprotected content on the page: | Note that if your page is served using HTTPS, you will also need to use https to retrieve the map, otherwise users will receive messages warning about mixed and unprotected content on the page: | ||
<iframe src="<strong>https</strong>://map.cam.ac.uk/Lucy+Cavendish+College"></iframe> | <iframe src="<strong>https</strong>://map.cam.ac.uk/Lucy+Cavendish+College"></iframe> | ||
Firefox version 23 (and presumably later) actually blocks such content entirely if http is used in the iframe src when embedding in an https page. | |||
If you can serve the same pages using either protocol, you can arrange for the map to serve using the same protocol as the page in which it is embedded by omitting the protocol, just starting with the two slashes, thus: | |||
<iframe src="<strong>//</strong>map.cam.ac.uk/Lucy+Cavendish+College"></iframe> | |||
Revision as of 11:33, 23 August 2013
To embed a map in another web page, simply use an IFRAME, like this:
<iframe src=url>(non-iframe text)</iframe>
where url is a standard map linking URL - see The Map URL API. For example:
<iframe src="http://map.cam.ac.uk/Lucy+Cavendish+College"></iframe>
Typically your CSS will set the width and height of the IFRAME, though you can also do this directly:
<iframe src="http://map.cam.ac.uk/Lucy+Cavendish+College" style="width: 400px; height: 400px;"></iframe>
The presentation is slightly different from the full page for the same URL in that only the map is displayed without any ancillary information, titling, branding etc. The height and/or width of the iframe can be specified relative to the height/width of its containing elements (e.g. "width: 100%"). If the containing element changes size, as is common in responsive design, the map will adapt to the new size.
We suggest not using the bounding box or ref form of URL for embedding a map relevant to an institution. By using the simple name of the institution or its code, then the map will
- adjust if the institution moves (using a bounding box or building reference leaves it showing the old geographical location)
- centre on the institution concerned
- show a marker for just the institution concerned, not all of its neighbbours
The src link can include an annotation overlay or positioning fragment.
HTTPS
Note that if your page is served using HTTPS, you will also need to use https to retrieve the map, otherwise users will receive messages warning about mixed and unprotected content on the page:
<iframe src="https://map.cam.ac.uk/Lucy+Cavendish+College"></iframe>
Firefox version 23 (and presumably later) actually blocks such content entirely if http is used in the iframe src when embedding in an https page.
If you can serve the same pages using either protocol, you can arrange for the map to serve using the same protocol as the page in which it is embedded by omitting the protocol, just starting with the two slashes, thus:
<iframe src="//map.cam.ac.uk/Lucy+Cavendish+College"></iframe>
