Dev: SM: Example - Basic Map
Embedding Maps on your website
he best way to start learning about the StreetMaps API is to see a simple example. The following web page displays a 500x500 map zoomed into West Street, Durban. You can look at this example here or copy and paste the below code to your server. Remember, you will have to replace the key below with your own Maps API key.
In this simple example, there are a few things to note
- You need to create a tag to hold the map .
- You run a javacript function to load the map .
- You center the map on a given geographic point.
These steps are explained below
Loading Maps API
You must reserve a spot for the map on your webpage. To do this create a div, as below, element and include the map reference to this element . In the example we have used "map1" as the reference and set its size using style attributes.
<div style="width:500;height:500;" id="map1" ></div>
myMap = new CAatMap();
To create a starting point for the map you will need to enter latitude and longitude coordinates. As in the example above the first two parameters are the latitude and longitude which will be the center point of the map when it is loaded and the third option is the zoom level. The Zoom level, has to be one of the following: 10.24, 5.12, 2.56, 1.28, 0.64, 0.32, 0.12, 0.05, 0.02, 0.01, 0.005, 0.0025, 0.00125, 0.000625. This represents the amount of map, in degrees, per 300x300 pixel tile, between the center and an edge. (play with the Zoom level to really get a feel for it)
Initialising the map
To ensure that the map is only placed on the page after the page has fully loaded, we only execute the function which constructs the Map object once the <body> 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.