Multimap logo Multimap Embedded Maps - Implementation Guidelines / Software Development Kit (SDK)

Welcome to the full documentation for the Multimap Embedded Maps service; please click here to see the 'quick start' guide to the service.

Introduction

Overview

Multimap now offers a free Embedded Maps service which allows small businesses, hobbyists and other Internet users to show maps on their sites. The Embedded Maps service, available at no cost from Multimap, provides a single line of HTML which you can copy and paste into a web page. This link creates a map, which can be dragged, in a choice of map styles or aerial imagery for any location in the world.

The pasted HTML includes four hyperlinks back to the Multimap website:

  1. See this location on Multimap.
  2. See this location in Bird's Eye.
  3. Get directions to this location.
  4. Get directions from this location.
The service is limited to 50,000 transactions per year and cannot be used for any internal applications. For full details of restrictions that apply when implementing Multimap's Embedded Maps service, please see Multimap's Embedded Maps Terms and Conditions.

Who should read this documentation?

This documentation is for small businesses, hobbyists and other Internet users who wish to show free Embedded Maps on those sites.

Assumptions

The document assumes that you are familiar with the basic features and scope of HTML.

Scope of documentation

This document covers the embedding of Multimap maps and aerial photographs on websites.

For details of how to incorporate other Multimap services into your own website, including the full-featured Multimap API, please contact the Multimap Sales team whose details appear at the foot of this web page.

Copyright

Please note that the maps and data used to provide Multimap services represent copyrighted information, which is owned by our data partners. Do not copy, store, cache, or manipulate in any way any of the maps generated by Multimap services. Any violation of this instruction could result in the cancellation of your service.

For full details of restrictions that apply when implementing Multimap's Embedded Maps service, please see Multimap's Embedded Maps Terms and Conditions.

Please ensure also that every web page that you use to provide a Multimap service for your users maintains the link to Multimap's Terms and Conditions of Use of map images and data that appears in the copyright bar at the foot of each Embedded Map.

Implementing Embedded Maps

Obtaining an embedded map

To obtain a free Multimap map to embed in your website:

  1. Visit http://www.multimap.com and search for a location.
  2. Use the controls at the top left-hand side of the map to select the map type (map or aerial image) that you require.
  3. Click on the word "Link" above the map, on the right; the Link to this map dialog box appears.
  4. If you wish just to create a link to the map you have selected on the Multimap public website (instead of embedding the map in your own web page), copy the shortened URL that appears in the top half of the Link to this map dialog box and paste it as a link on your web page; visitors to your website can click on this link to see the map on the Multimap public website.
  5. If you wish to embed the map that you have selected in your own website, click on the terms & conditions link to view Multimap's Embedded Map Terms and Conditions.
  6. Check the box to accept Multimap's Embedded Map Terms and Conditions; a line of HTML code appears immediately below the checkbox.
  7. If you wish to make any changes to the default medium-sized map:
    1. Click on the customize and preview map link; the Embed: web page appears in a new browser window.
    2. Use the radio buttons to select the map size you require.
    3. If you have selected a custom map size, enter its width and height in the relevant text boxes.
    4. If you wish to pan the map or have it zoom in or out, or if you wish to move the red circle, click on the map and use your mouse controls in the same way as you would adjust the main map on the Multimap website: the HTML code at the bottom of the page updates automatically to reflect any changes you make.
  8. When you are satisfied with the appearance of your preview map, copy the HTML code at the bottom of the page to your clipboard.
  9. Close the Embed: web page and return to the Link to this map dialog box.
  10. Click on the close button at the top right-hand side of the Link to this map dialog box.
  11. Paste the HTML code into your own web page at the position where you wish your map to appear, then save your web page.
  12. View your web page in your browser: your Multimap Embedded Map should now be visible.

Embedded Map size

Multimap delivers Embedded Maps in several sizes:

DescriptionDimensions (width x height in pixels)
Small350x280
Medium (default)500x400
Large640x512
CustomAny size between 100x100 and 800x800

Default settings

The default Embedded Map is medium-sized and of the map type and zoom factor specified in the original request to the Multimap website.

Editing Embedded Maps using HTML

If you wish to change the size of the map or the location of its red circle, edit the HTML code as required. Please note that, if you use HTML to change the size of your map, you must also change the size of the <iframe> that contains it, in order to show the correct copyright information.

Parameters

The Multimap Embedded Maps service uses the same parameters to deliver its maps as the Multimap website:

NameDescriptionPermissible ValuesExampleMandatory?
countryCodeThis is the two-letter code that determines the country in which the map's location is situated. Any valid two-letter International Organization for Standardization (ISO) country codecountryCode=US Only if you are also using the qs parameter
emidThis is the unique Embedded Map key that identifies and activates the embedded map. Any valid key, generated automatically by Multimap N/A (generated automatically and inserted into the default URL when you click on the link to accept the terms and conditions of the Embedded Maps service)Yes
heightThis is the height/width of the map, in pixels, within its <iframe>. Any integer between 100 and 800height=400No
latThis is the map's latitude coordinate. Any decimal between -90 and 90lat=Only if you are also using the lon parameter
lonThis is the map's longitude coordinate. Any decimal between -180 and 180lon=Only if you are also using the lat parameter
mapTypeThis determines the type of map or aerial image that appears. "map", "aerial" or "hybrid"
(Please note that Bird's Eye imagery is not currently available via the Multimap Embedded Maps service.)		 mapType=aerialNo
moveMapThis is the distance southwards and eastwards, in pixels, by which the map is offset from its default position. Any comma-separated pair of integers (east, south)moveMap=50,50No
qsThis 'quick search' parameter is a string that identifies a location by its address. Any string that contains a valid postal (or ZIP) code, place name or address, with blank spaces substituted with the %20 character qs=fleet%20street,%20london Only if you are also using the countryCode parameter
redCircleThis parameter determines whether the Multimap red circle appears on the map. "true", "false"redCircle=trueNo
widthThis is the width of the map, in pixels, within its <iframe>. Any integer between 100 and 800width=500No
zoomFactorThis is the zoom factor of the map - the extent to which you have zoomed it in or out. Any integer between 1 and 23zoomFactor=15Yes
Please note that, if you altering your parameters from their automatically-generated default values, you should specify your location by either a coordinate pair of lat and lon parameters or a combination of countryCode and qs parameters. Please note also that coordinates take precedence over other parameters when determining a location.

Examples

Default (medium-sized) map example

This section shows an image of a Multimap Embedded Map as it appears on a web page with with all its default settings.

Screenshot

View map of Greater London, England, UK on Multimap.com
Bird's Eye view of Greater London, England, UK
Get directions to or from Greater London, England, UK

Code

<div id="MMEmbeddedMap" style="padding:8px">
<iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="http://www.multimap.com/client/embed/?lat=51.51453&lon=-0.10845&zoomFactor=16
&qs=ec4a 2dy&emid=[embedded_map_key]">
</iframe>
<div><a href="http://www.multimap.com/maps/?lat=51.51453&lon=-0.10845&zoomFactor=16">
View map of Greater London, England, UK</a> on Multimap.com<br />
<a href="http://www.multimap.com/maps/?lat=51.51453&lon=-0.10845&zoomFactor=16&mapType=oblique">
Bird's Eye view of Greater London, England, UK</a><br />
Get directions <a href="http://www.multimap.com/directions/?lat_2=51.51453&lon_2=-0.10845&countryCode_2=GB
&displayName_2=Greater London, England&qs_2=Greater London, England">to</a> or 
<a href="http://www.multimap.com/directions/?lat_1=51.51453&lon_1=-0.10845&countryCode_1=GB
&displayName_1=Greater London, England&qs_1=Greater London, England">from</a> Greater London, England, UK
</div>
</div>

Small map example

This example demonstrates how the act of selecting a smaller Embedded Map 'over-writes' the default size and specifies the map's new new height and width in the HTML code, along with the size of the <iframe> that contains it.

Screenshot


View map of Greater London on Multimap.com
Bird's Eye view of Greater London on Multimap.com
Get directions to or from Greater London on Multimap.com

Code

<div id="MMEmbeddedMap" style="padding:8px">
<iframe width="350" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="http://www.multimap.com/client/embed/?width=350&height=280
&lat=51.51453&lon=-0.10845&zoomFactor=16&emid=[embedded_map_key]&mapType=map&moveMap=0,0">
</iframe><br />
<a href="http://www.multimap.com/maps/?lat=51.51453&lon=-0.10845&zoomFactor=16" target="_blank">
View map of Greater London on Multimap.com</a><br />
<a href="http://www.multimap.com/maps/?lat=51.51453&lon=-0.10845&zoomFactor=16&mapType=oblique" target="_blank">
Bird's Eye view of Greater London on Multimap.com</a><br />
<div>
Get directions <a href="http://www.multimap.com/directions/?lat_2=51.51453&lon_2=-0.10845&zoomFactor=16&qs_2=Greater London" 
target="_blank">to</a> or 
<a href="http://www.multimap.com/directions/?lat_1=51.51453&lon_1=-0.10845&zoomFactor=16&qs_1=Greater London" 
target="_blank">from</a> Greater London on Multimap.com
</div>
</div>

Customized examples

DescriptionScreenshotCode
A small Embedded Map with the Multimap red circle suppressed
View map of Greater London on Multimap.com
Bird's Eye view of Greater London on Multimap.com
Get directions to or from Greater London on Multimap.com
 
<iframe width="350" height="280" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0" 
src="http://www.multimap.com/client/embed/?width=350&height=280
&lat=51.51453&lon=-0.10845&zoomFactor=16
&emid=[embedded_map_key]&mapType=map
&moveMap=0,0&redCircle=false"></iframe><br />
<a href="http://www.multimap.com/maps/?lat=51.51453&lon=-0.10845
&zoomFactor=16" 
target="_blank">View map of Greater London on Multimap.com</a><br />
<a href="http://www.multimap.com/maps/?lat=51.51453&lon=-0.10845
&zoomFactor=16&mapType=oblique" 
target="_blank">
Bird's Eye view of Greater London on Multimap.com</a><br />
<div>Get directions 
<a href="http://www.multimap.com/directions/?lat_2=51.51453&lon_2=-0.10845
&zoomFactor=16&qs_2=Greater London" 
target="_blank">to</a> or 
<a href="http://www.multimap.com/directions/?lat_1=51.51453&lon_1=-0.10845
&zoomFactor=16&qs_1=Greater London" 
target="_blank">from</a> Greater London on Multimap.com</div>
A small Embedded Map showing an address by means of the qs and countryCode parameters
View map of Berlin on Multimap.com
Birds Eye view of Berlin on Multimap.com
Get directions to or from Berlin on Multimap.com
 
<iframe width="350" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="http://www.multimap.com/client/embed/?width=350&height=280
&qs=unter%20den%20linden%202,%20berlin%2010117&countryCode=de&zoomFactor=17
&emid=[embedded_map_key]&mapType=map&moveMap=0,0"></iframe><br />
<a href="http://www.multimap.com/maps/?lat=52.5177&lon=13.39772&zoomFactor=17" 
target="_blank">View map of Berlin on Multimap.com</a><br />
<a href="http://www.multimap.com/maps/?lat=52.5177&lon=13.39772&zoomFactor=17&mapType=oblique" 
target="_blank">Birds Eye view of Berlin on Multimap.com</a><br />
<div>Get directions <a href="http://www.multimap.com/directions/?lat_2=52.5177&lon_2=13.39772
&zoomFactor=17&qs_2=Berlin" 
target="_blank">to</a> or <a href="http://www.multimap.com/directions/?lat_1=52.5177&lon_1=13.39772
&zoomFactor=17&qs_1=Berlin" 
target="_blank">from</a> Berlin on Multimap.com</div>
A small Embedded Map without any additional hyperlinks, showing a location by means of the qs and countryCode parameters 
<iframe width="350" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="http://www.multimap.com/client/embed/?width=350&height=280&qs=raddon%20top&countryCode=uk&zoomFactor=12
&emid=[embedded_map_key]
&moveMap=0,0"></iframe><br />
<a href="http://www.multimap.com/maps/?lat=51.51453&lon=-0.10845&zoomFactor=16" 
target="_blank">View map of Greater London on Multimap.com</a><br />
<a href="http://www.multimap.com/maps/?lat=51.51453&lon=-0.10845&zoomFactor=16&mapType=oblique" 
target="_blank">
Bird's Eye view of Greater London on Multimap.com</a><br />
<div>Get directions <a href="http://www.multimap.com/directions/?lat_2=51.51453&lon_2=-0.10845
&zoomFactor=16&qs_2=Greater London" target="_blank">to</a> or 
<a href="http://www.multimap.com/directions/?lat_1=51.51453&lon_1=-0.10845&zoomFactor=16&qs_1=Greater London" 
target="_blank">from</a> Greater London on Multimap.com</div></td>
The same map as the previous example, with its center offset by 50 pixels east and 50 pixels south by means of the moveMap parameter 
<iframe width="350" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="http://www.multimap.com/client/embed/?width=350&height=280&qs=raddon%20top&countryCode=uk&zoomFactor=12&
&emid=[embedded_map_key]
&moveMap=50,50"></iframe><br />
<a href="http://www.multimap.com/maps/?lat=51.51453&lon=-0.10845&zoomFactor=16" 
target="_blank">View map of Greater London on Multimap.com</a><br />
<a href="http://www.multimap.com/maps/?lat=51.51453&lon=-0.10845&zoomFactor=16&mapType=oblique" 
target="_blank">
Bird's Eye view of Greater London on Multimap.com</a><br />
<div>Get directions <a href="http://www.multimap.com/directions/?lat_2=51.51453&lon_2=-0.10845
&zoomFactor=16&qs_2=Greater London" target="_blank">to</a> or 
<a href="http://www.multimap.com/directions/?lat_1=51.51453&lon_1=-0.10845&zoomFactor=16&qs_1=Greater London" 
target="_blank">from</a> Greater London on Multimap.com</div></td>
A small aerial photograph without any additional hyperlinks 
<iframe width="350" height="280" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0" 
src="http://www.multimap.com/client/embed/?width=350&height=280
&lat=51.51453&lon=-0.10845&zoomFactor=16
&emid=[embedded_map_key]&mapType=aerial
&moveMap=0,0"></iframe>
Multimap Embedded Maps 'quick start' guide.

Further Help

If you require further help with your Multimap service implementation, additional Multimap services or general account enquiries, please contact Multimap:

Sales: +44 (0)20 7632 7800
Customer Support: +44 (0)20 7632 7777
email: mminform@microsoft.com