Create a Map
Creates a canvas object on which to draw. You must do this first, as all future calls to drawing methods from this instance will be bound to this canvas.
//please add the following line between <head> and </head>
<script type="text/javascript" src="http://js.street-directory.com.au/jmap.php"></script>
//Please add the following line between <body> and </body>
<div id="map-canvas" style="width:500px; height:500px; position:absolute;"></div>
//please declare the <div> section where the map will be displayed
//please do not change the id name
//this css style has to be assigned for the size and position of the map
//please do not add any content between <div> and <div/>
//code in javascript
//declare the map to the <div>'s id that we have assigned in the html page
var myMap = new JMap(document.getElementById("map-canvas"));
//set the longitude for the map, must be digit
var lon = 145.15996;
//set the latitude for the map, must be digit
var lat = -37.855285;
//create the longitude and latitude object for the map
var myLonLat = new JLonLat(lon,lat);
//set the level for the map scale, must be digit, between 1-16
var lv = 9;
//set the center of map, the parameter are lonlat object, level and the map type
myMap.setCenter(myLonLat,lv,J_AUSWAY_MAP);
Create a Marker
Creates a marker, or a pointer, pointing (to) a location in the map
//please add the following javascript code
//code in javascript
//set the longitude for the map, must be digit
var lon = 145.15996;
//set the latitude for the map, must be digit
var lat = -37.855285;
//create the longitude and latitude object for the map
var point = new JLonLat(lon,lat);
//set the icon marker's image to the default image
var icon = new JIcon(J_DEFAULT_ICON);
//set the option for the marker
var markerOptions = {icon:icon, draggable:false};
//initiate the marker with the lonlat object and the option that we have declared
var marker = new JMarker(point,markerOptions);
//add the marker to the map
myMap.addOverlay(marker);
Create Multiple Markers
Create more than one marker. The process is same with create a single marker, the difference is just we have to do the process more than one time. To do that, we can use looping process.
//please add the following javascript code
//code in javascript
//set the icon marker's image to the default image
var icon = new JIcon(J_DEFAULT_ICON);
//set the option for the marker
var markerOptions = {icon:icon, draggable:false};
//create lon array
var lon = [145.15996,145.16996];
//create lat array
var lat = [-37.855285,-37.865285];
i=0;
var icon = new JIcon(J_DEFAULT_ICON);
var markerOptions = {icon:icon, draggable:false};
//it keeps processing as long as lon and lat have a value
while(lon[i]&&lat[i])
{
//we create the point object with dynamic longitude and latitude based on the i variable
var point = new JLonLat(lon[i],lat[i]);
var marker = new JMarker(point,markerOptions);
myMap.addOverlay(marker);
//add the i, so we can change the longitude and the latitude to the new one
i++;
}
Add Info Window to the Marker
Show the info window ballon from marker, when we click it.
//please add the following javascript code
//code in javascript
//function to create infowindow when we click the marker
function markerClick() {
//add the marker using openInfoWindow method from the marker object.
marker.openInfoWindow(<div style='width:90px; height:40px'>Hello World</div>);
}
//add listener to the marker object
myMap.Event.addListener(marker,"click",markerClick);
Create Map Control
The Map Control is to zoom and pan processing.
//please add the following javascript code
//code in javascript
//for map control position in the map
var offset = new JSize(5,5);
//set the map control position
var ctrlPosition = new JControlPosition(J_ANCHOR_TOPRIGHT, offset);
//create the map control
var lmc = new JLargeMapControl();
//add the map control to the map.
myMap.addControl(lmc,ctrlPosition);
Create Map Reference
//please add the following javascript code
//code in javascript
//create map reference
var mr = new JMapReferenceControl();
//add the map reference to the map
myMap.addControl(mr);
Complete Script
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Street Directory Maps JavaScript API V0.1.2</title>
<script type="text/javascript" src="http://js.street-directory.com.au/jmap.php"></script>
</head>
<body>
<div id="map" style="width:500px; height:500px; position:absolute;"></div>
<script type="text/javascript">
var myMap = new JMap(document.getElementById("map"));
var lon = 145.15996;
var lat = -37.855285;
var myLonLat = new JLonLat(lon,lat);
var lv = 8;
myMap.setCenter(myLonLat,lv,J_AUSWAY_MAP);
var lon = 145.15996;
var lat = -37.855285;
var point = new JLonLat(lon,lat);
var icon = new JIcon(J_DEFAULT_ICON);
var markerOptions = {icon:icon, draggable:false};
var marker = new JMarker(point,markerOptions);
myMap.addOverlay(marker);
var icon = new JIcon(J_DEFAULT_ICON);
var markerOptions = {icon:icon, draggable:false};
var lon = [145.25996,145.35996];
var lat = [-37.865285,-37.965285];
i=0;
var icon = new JIcon(J_DEFAULT_ICON);
var markerOptions = {icon:icon, draggable:false};
while(lon[i]&&lat[i])
{
var point = new JLonLat(lon[i],lat[i]);
var marker = new JMarker(point,markerOptions);
myMap.addOverlay(marker);
i++;
}
function markerClick() {
marker.openInfoWindow("Test Info Window");
}
myMap.Event.addListener(marker,"click",markerClick);
var offset = new JSize(5,5);
var ctrlPosition = new JControlPosition(J_ANCHOR_TOPRIGHT, offset);
var lmc = new JLargeMapControl();
myMap.addControl(lmc,ctrlPosition);
var mr = new JMapReferenceControl();
myMap.addControl(mr);
</script>
</body>
</html>
|
