Maps API Documentation

Prerequisites	draw	removeControl
A simple example	setRoute	setSearchTargetWindow
Example explained	setSize	panTo
Map object	setHeight	Events
Methods	setWidth	onRouteChanged
setDeparture	setDefaultZoomLevel	Browser compatibility
setDestination	setResetAsInitialRouteEnabled	API updates
setCulture	setDepartureResetEnabled
setDestinationResetEnabled	addControl

Prerequisites

To be able to display flash maps on your page you need to allow access to the Flash from Skyscanner’s domain. To do that please create a crossdomain.xml file in the root folder of your website. Read more about it in Adobe’s technical documentation. Here is the content of the file:

            <?xml version="1.0"?>
            <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
            <cross-domain-policy>
            <allow-access-from domain="*.skyscanner.net" />
            </cross-domain-policy>

A simple example

The easiest way to start learning about this API is to see a simple example. The following web page displays a map showing all routes from Paris.

            <html>
                <head>
                    <script type="text/javascript" src="http://api.skyscanner.net/api/ajax/loader.js?key=ABCDEFGH"></script>
                    <script type="text/javascript">
                        skyscanner.load('maps', '1');
                        var map;
                        function main(){ 
                            map = new skyscanner.maps.Map(); 
                            map.setDeparture('PARI'); 
                            map.draw(document.getElementById('map'));
                        };
                        skyscanner.setOnLoadCallback(main);
                    </script>
                </head>
                <body>
                    <div id="map">
                        <a href="http://www.skyscanner.net/fr/vols-de/pari/vols-a-bas-prix-de-paris.html">Vols a bas prix au départ de Paris</a>
                    </div>
                </body>
            </html>

Example explained

The first thing you need to do is add an appropriate script tag to initiate the API loader. Make sure you use the API key assigned to your site or sign-up for API key if you don’t have one.

<script type="text/javascript" src="http://api.skyscanner.net/api/ajax/loader.js?key=ABCDEFGH"></script>

Load the Maps API by using the skyscanner.load method as shown below. The skyscanner.load method requires an argument for the specific API and version number to load.

skyscanner.load('maps', '1');

Create a <div> tag inside <body> tag of the page and give it a unique ID. Inside the <div> tag you must add an anchor tag that links to the page on Skyscanner that shows a similar configuration. Please make sure to use a localized URL and anchor text appropriate for the snippet’s culture. Example for French:

            <div id="map">
            <a href="http://www.skyscanner.net/fr/vols-de/pari/vols-a-bas-prix-de-paris.html">Vols à bas prix au départ de Paris</a>
            </div>

The anchor tag above sets the default properties of the map. The example above sets:

● title - Vols à bas prix au départ de Paris
● departure place – pari
● culture - fr

These default values can be overrwritten later with Javascript code. If you are not sure what URL to use then go to the Map code wizard.

Create a main function that configures the Map object. Use the skyscanner.maps.* namespace for all classes, methods and properties in the Skyscanner Maps API.

            var map;				
            function main(){
                map = new skyscanner.maps.Map();
                map.setDeparture('PARI'); 
                map.draw(document.getElementById('map'));
            };

            skyscanner.setOnLoadCallback(main);

Map object

Methods

setDeparture(placeID) - sets the depature place. PlaceID can be the ID of airport, city or country. You can find placeID by performing the search on Skyscanner and looking at URL. For example: http://www.skyscanner.net/gbp/flights/lond/pari/cheapest-flights-per-month-to-paris-from-london.html contains codes for London (LOND) and Paris (PARI). You can also use the code wizard to set departure point. To set the departure to London Stansted use:

        map.setDeparture('STN'); // sets departure to London Stansted

setDestination(placeID) - sets the destination place. To set the destination to Paris use:

        map.setDestination('PARI'); // sets destination to Paris

To display map texts in one of 20 Skyscanner’s languages please use : setCulture(cultureID) - sets map’s locale to specified cultureID

        map.setCulture('FR'); // sets map’s language to French

draw(divElement) - draws the map in specified <div> element. The example below will draw snippet in div element with id=”map”.

        map.draw(document.getElementById('map')); // displays map in div with id="map"

setRoute(departurePlaceID, destinationPlaceID) - sets the given route on the map.

        map.setRoute('UK',''); // pans map to United Kingdom

        map.setRoute('GLAS',''); // pans map to UK and sets Glasgow (all airports) as departure

        map.setRoute('GLA',''); // pans map to UK and sets Glasgow Int. (GLA) as departure

        map.setRoute('GLA','IT'); // pans map to show both United Kingdom and Italy (IT), 
                                  // sets Glasgow International (GLA) as departure
        map.setRoute('GLA','CIA'); // pans map to show both United Kingdom and Italy, 
                                   // sets Glasgow International (GLA) as departure
                                   // and Rome Ciampino (CIA) as destination
        map.setRoute('UK','CIA') // pans map to show both United Kingdom and Italy, 
                                 // and Rome Ciampino as destination

setSize(width,height) - sets the dimensions of the map
setHeight(height) - sets the height of the map
setWidth(width) - sets the width of the map

Width should be between 200px and 1000px. Height should be between 200px and 560px.

        map.setSize(600,400); // sets width to 600 pixels and height to 400 pixels
        setHeight(400); // changes the height of the map to 400 pixels
        setWidth(600); // changes the width of the map to 600 pixels

setDefaultZoomLevel(zoomLevel) - sets the maximum zoom level when zooming to airports/countries. The zoomLevel can have values between 1 and 10, where 1 is the smallest zoom. 7 is default.

        map.setDefaultZoomLevel(7); // sets default zoom level to 7

setResetAsInitialRouteEnabled(bool) - when enabled pressing ’Reset’ on the map will restore the initial route. True by default.

        map.setResetAsInitialRouteEnabled(true); // "Reset" button will restore initial route

setDepartureResetEnabled(bool) - when false, user can’t change departure place. True by default

        map.setDepartureResetEnabled(false); // user will not be able to change departure place

setDestinationResetEnabled(bool) - when false, user can’t change destination place (can select only departure places with flights to selected destination). True by default.

        map.setDestinationResetEnabled(false); // user will not be able to change dest. place

addControl(controlType) - adds number of controls to the map. See below for all control types.

        map.addControl('navigation'); // adds navigation control
        map.addControl('reset'); // adds reset button control

removeControl(controlType) - removes number of controls to the map. See below for all control types.

        map.removeControl('navigation'); // remove navigation control
        map.removeControl('reset'); // remove reset button control

setSearchTargetWindow(newWindow) - when newWindow is true then clicking on "Search" button will open target page in new tab/window, otherwise it will open it in the same window.

panTo(placeID) - moves map to given place and centers on it. Zoom out happens when necessary

        map.panTo('UK'); // moves map to UK and centers on it
        map.panTo('KRK'); // moves map to Poland and centers on Cracow

Events

onRouteChanged(oldRoute, newRoute) - fired when route has been changed

onRouteChanged = function(oldRoute, newRoute){
    alert('Route changed from ' + oldRoute.departureName() +
          '->' + oldRoute.destinationName() +
          ' to ' + newRoute.departureName() +'->' + newRoute.destinationName());
}

The route object returned has the following methods you can use:

        route.departureID();  // id of departure place (country, city or airport)
        route.departureName(); // name of departure place 
        route.destinationID(); // id of destination place
        route.destinationName(); // name of destination place

Browser compatibility

The Skyscanner Snippets API currently support Firefox 2+, IE 6+, Safari 3+, and Opera 9+.

API updates

The second parameter of the skyscanner.load method contains the expected version level of this API. When we do a significant update to the API, we will increase the version number and send an email to all API key owners.
After a new version is released, Skyscanner will support both old and new versions concurrently for a few months. After this period expires, client requests using the old API will no longer be accepted, so change your code as soon as possible after receiving notification of the change.
The Skyscanner team will also periodically update the API with recent bug fixes and performance enhancements without requiring a version update. For the most part, these fixes should remain transparent to you, but we may inadvertently disable some API clients.