<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<style type="text/css">
* { margin: 0; padding: 0; }
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; }
#map_canvas { width: 100%; height: 100%; background-color: gray; }
</style>
<script>
var map;
var marker;
var zoom;
var dotSize;
var dotColor;
var traceIcon;
function initialize(lat, lon, mapWinDotSize, mapWinDotColor) {
dotSize = mapWinDotSize;
dotColor = mapWinDotColor;
if (dotSize > 10) dotSize = 10;
var myOptions = {
center: new google.maps.LatLng(lat, lon),
zoom: 3,
mapTypeId: google.maps.MapTypeId.SATELLITE,
panControl: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
zoom = 0;
var image = new google.maps.MarkerImage("qrc:///map/crosshair.png",
null,
null,
new google.maps.Point(20, 20),
new google.maps.Size(40,40)
);
if (dotColor == 1) {
traceIcon = new google.maps.MarkerImage("qrc:///map/reddot.png",
null,
null,
new google.maps.Point(dotSize/2, dotSize/2),
new google.maps.Size(dotSize, dotSize)
);
}
if (dotColor == 2) {
traceIcon = new google.maps.MarkerImage("qrc:///map/yellowdot.png",
null,
null,
new google.maps.Point(dotSize/2, dotSize/2),
new google.maps.Size(dotSize, dotSize)
);
}
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lon),
icon: image,
});
}
function gotoLocation(lat, lon) {
if (zoom == 0) {
zoom = 17;
map.setZoom(zoom);
}
var position = new google.maps.LatLng(lat, lon);
map.setCenter(position);
marker.setPosition(position);
if (dotSize > 0) {
var trace = new google.maps.Marker({
map: map,
position: position,
icon: traceIcon,
});
}
}
</script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
</head>
<body>
<div id="map_canvas">Waiting for data...</div>
</body>
</html>