Code (This is how the code looks like based on the configuration above. It can be copied and pasted directly into your project):
<html>
<head>
<meta charset='UTF-8' /> <!--Page has to be UTF-8 encoded for the server if using non-English characters.-->
<title>SiteWatch API Example Viewer</title>
<script src='http://kort.samsyn.is/api/SiteWatch.aspx?v=2&key=your_keycode' type='text/javascript'></script>
<script type='text/javascript'>
//A map object variable.
var map;
//Searching result function.
function sResult(map, res)
{
var txt = '';
var xvalue = 0;
var yvalue = 0;
for (var i = 0, c = res.data.length; i < c; i++) {
xvalue = res.data[i].p[0].x;
yvalue = res.data[i].p[0].y;
txt = txt + '<b>Name:</b> ' + res.data[i].n + ', ' +
'<b>X: </b>' + xvalue + ', ' +
'<b>Y: </b>' + yvalue + '<br />';
}
document.getElementById('SearchResult').innerHTML = txt;
if (xvalue !== 0) {
map.removeAllMarkers();
//Create a marker object.
var marker = map.addMarker('house',
{ x: xvalue, y: yvalue },
'Your search results',
'https://kort.samsyn.is/api/img/house.png');
var point = SWPoint.create(xvalue, yvalue);
map.setCenter(point, 10);
}
};
//Create a map object.
function InitMap() {
map = SWMap.create('map',
{ panButton: false, zoomButton: false,
defaultZoom: 3, defaultCenterPoint: { x: 359583, y: 406481 }
});
//Search for an address.
map.search('Háaleitisbraut 58', sResult, this);
};
function SearchText() {
var text = document.getElementById('txtName');
if (text.value !== '') {
map.search(text.value, sResult, this);
//alert('You entered: ' + text.value)
}
else {
alert('Would you please enter some text ?');
}
};
</script>
</head>
<body onload='InitMap()'>
<table>
<tr>
<td>
<div id='map' style='height:300px; width:600px;'></div>
</td>
</tr>
<tr>
<td>
<div id='SearchResult'></div>
</td>
</tr>
<tr>
<td>
<div>
Address: <input type='text' id='txtName'>
<input type='button' type='submit' id='btnSearch' onClick='SearchText()' value='Search'>
</div>
</td>
</tr>
</table>
</body>
</html>
|