The Embedding API: Difference between revisions

From University Map Wiki
Jump to navigationJump to search
(Revise to be clear that small-screen stuff is for the future)
No edit summary
Line 11: Line 11:
   <iframe src="<nowiki>http://map.cam.ac.uk/Lucy+Cavendish+College</nowiki>" style="width: 400px; height: 400px;"></iframe>
   <iframe src="<nowiki>http://map.cam.ac.uk/Lucy+Cavendish+College</nowiki>" 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. There is a small control in the corner offering a menu including a link to the main map. (note: the map determines its presence within an iframe using a Javascript test). In the future, on small touch screen devices any touch on the map will probably just jump to the corresponding map page for more detailed presentation, so it just acts as a link.
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. There is a smaller menu than the main map when clicking on it which includes a more information (note: the map determines its presence within an iframe using a Javascript test). In the future, on small touch screen devices any touch on the map will probably just jump to the corresponding map page for more detailed presentation, so it just acts as a link.


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&nbsp;the map will
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&nbsp;the map will
Line 17: Line 17:
* centre on the institution concerned&nbsp;
* centre on the institution concerned&nbsp;
* show a marker for just the institution concerned, not all of its neighbbours
* show a marker for just the institution concerned, not all of its neighbbours
The src link can include an [[Map_Annotation|annotation overlay]] or positioning fragment


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>

Revision as of 00:57, 15 February 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. There is a smaller menu than the main map when clicking on it which includes a more information (note: the map determines its presence within an iframe using a Javascript test). In the future, on small touch screen devices any touch on the map will probably just jump to the corresponding map page for more detailed presentation, so it just acts as a link.

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

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>