Whereis Javascript API Tutorial

Hello Mobile

=======

A step-by-step guide for getting started with the Whereis® Javascript API. Learn how to create a simple web page for mobile devices that contains a full-screen WhereIs® API mobile-optimised map.

Create an empty webpage file. Save it as mobile.html
Add HTML 5 document structure, including DOCTYPE, html, head and body tags.
Add meta tags for devices. These tags contain information that tells browsers how to display the page on Android phones, iPhones and tablet devices.
Add a DIV to contain your map, and include the attribute id="map" so we can find it later
We want the map to be full screen so we add the appropriate css styling to the head, as shown.
Add the WhereIs® API JavaScript include to the document head, with libraries="mobile", to retrieve the API profile that is optimised for mobile devices.
Write a simple JavaScript function to run when the page has finished loading. This function will initialise a mobile map and place it in the div tag.
Save your file, copy to your host and view it in a browser. It should display a full page WhereIs® mobile map.
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <script type="text/javascript"
        src="http://au.com.sensis.ems.task.api.ems.sensis.com.au/v2/web/js/ems/?libraries=mobile&token=<YOUR_TOKEN>"></script>
    <script type="text/javascript">
        var map = null;

        window.onload = function() {
            map = new EMS.MobileMap("map");
        }
    </script>
    <style>
        html, body {
            height:100%;
            width:100%;
            padding:0;
            margin:0
        }
        #map {
            height:100%;
            width:100%
        }
    </style>

</head>
<body>
    <div id="map"></div>
</body>
</html>