SD Maps Tutorial

The "Hello World" of SD Maps
The easiest way to start learning about the SD Maps API is to see a simple example. The following web page displays a map centered on Streetdirectory Singapore Office, 305 Alexandra Road, Vantage Automotive Centre, Singapore 159942: 
<html>

<head>

<script type="text/javascript" language="javascript" src="http://www.streetdirectory.com/js/map_api/m.php"></script> 

<script type="text/javascript">

    function initialize() {
    
        var latlng = new GeoPoint(103.80733282853, 1.289478890541);
        
        var myOptions = {
        
            zoom: 13,
            
            center: latlng,
            
            showCopyright: false
        
        };
        
        var map = new SD.genmap.Map(
        
            document.getElementById("map_canvas"), 
            
            myOptions
        
        );
    
    }

</script>

</head>

<body onload="initialize()">

    <div id="map_canvas" style="width:100%; height:100%"></div>

</body>

</html>
In this simple example, there are a few things to note:
1. We include the Maps API JavaScript using a script tag.
2. We create a div element named "map_canvas" to hold the Map.
3. We create a JavaScript object literal to hold a number of map properties.
4. We write a JavaScript function to create a "map" object.
5. We initialize the map object from the body tag's onload event.

These steps are explained below.

Load the SD Maps API
<script type="text/javascript" language="javascript" src="http://www.streetdirectory.com/js/map_api/m.php"></script>
The http://www.streetdirectory.com/js/map_api/m.php URL points to the location of a php file that loads all of the symbols and definitions you need for using SD Maps API. Your page must contain a script tag pointing to this URL.

Map DOM Elements
<div id="map_canvas" style="width:100%; height:100%"></div>
For the map to display on a web page, we must reserve a spot for it. Commonly, we do this by creating a named div element and obtaining a reference to this element in the browser's document object model (DOM).

In the example above, we define a
named "map_canvas" and set it's size using style attributes. Note that this size is set to "100%" which will expand to fit the size on mobile devices. You may need to adjust these values based on the browser's screensize and padding.

Map Options
Before initializing map, must set the variables. This is all kind variable that commonly used: 
var latlng = new GeoPoint(103.80733282853, 1.289478890541);
var myOptions = {
    zoom: 13,
    center: latlng,
    draggable: true,
    enableDefaultLogo: true,
    showCopyright: false,
    resize: {
        w: 500,
        h: 500
    }
}
See Map API reference for more detail infomation about the map options.

SD.genmap.Map - the Elementary Object
var map = new SD.genmap.Map( document.getElementById("map_canvas"), myOptions );
The JavaScript class that represents a map is the Map class. Objects of this class define a single map on a page. (You may create more than one instance of this class - each object will define a separate map on the page.) We create a new instance of this class using the JavaScript new operator.

When you create a new map instance, you specify a <div> HTML element in the page as a container for the map. HTML nodes are children of the JavaScript document object, and we obtain a reference to this element via the document.getElementById() method.

This code defines a variable (named map) and assigns that variable to a new Map object, also passing in options defined within the myOptions object literal. These options will be used to initialize the map's properties. The function Map() is known as a constructor and its definition in Map API reference.

Loading the Map
<body onload="initialize()">
While an HTML page renders, the document object model (DOM) is built out, and any external images and scripts are received and incorporated into the document object. To ensure that our map is placed on the page after the page has fully loaded, we only execute the function which constructs the Map object once the element of the HTML page receives an onload event. Doing so avoids unpredictable behavior and gives us more control on how and when the map draws.

The body tag's onload attribute is an example of an event handler. The Google Maps JavaScript API also provides a set of events that you can handle to determine state changes. For more information, see Map Event Manager Reference.

Latitudes and Longitudes
We need a way to refer to locations on the map. The GeoPoint object provides such a mechanism within the SD Maps API. You construct a LngLat object, passing its parameters in the order {longitude, latitude}: 
var latlng = new GeoPoint(longtitude, latitude);
Note: the process of turning an address into a geographic point is known as geocoding. Geocoding is supported in this release of the SD Maps API. For more information, see Geocoding in the services section.


Add logo in SD Maps API
To create logo in SD Maps API, you can use addLogo method. Here is the sample: 
map.addLogo(imageUrl, {width: 76, height: 30}, SD.POSITION_TOP_LEFT, targerUrl);
You need to set the parameters needed for create logo in SD Maps API. The imageUrl parameter is the url of your logo. The width, height is the size of your logo. The third parameter is location where will you put the logo. And the targetUrl parameter is the link url to your website. The options for the third parameter are listed below:

Option Description
SD.POSITION_TOP_LEFT Located in top left map
SD.POSITION_TOP_RIGHT Located in top right map
SD.POSITION_BOTTOM_RIGHT Located in bottom right map
SD.POSITION_BOTTOM_LEFT Located in bottom left map



Add control in SD Maps API
To add control in SD Maps API, you can use addControl method. There are three navigation that you can use. Here is the sample of adding CompleteMapControl navigation. 
var navControl = new CompleteMapControl();
map.addControl(navControl);
navControl.setDisplay(0, false);
You can enable or disable the zoom & directional control width navControl.setDisplay(controlType, boolean). You can fill 0 in controlType for directional control and 1 for zoom control.
This is the display of CompleteMapControl navigation.


This is the display of MediumMapControl navigation.



Map Area
Map area is used to check whether a point is in the map bounds or not. 
var bounds = new MapArea([new GeoPoint(103.23, 1.3213), new GeoPoint(103.121, 1.2432)]);
bounds.isIn(Longitude, Latitude);
If a point is in the map bounds, the function will return true. If not, it will return false.