<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plot Path Demo Using Google Maps JavaScript API v3</title>
<link
href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css" />
<!--Google API Javascript Reference-->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--Literal Control for runtime javascript-->
<asp:Literal ID="js" runat="server"></asp:Literal>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<!--Canvas for showing the google map-->
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</form>
</body>
</html>
public static String PlotGPSPoints(DataTable tblPoints)
{
try
{
String Locations = "";
String sJScript = "";
int i = 0;
foreach (DataRow r in tblPoints.Rows)
{
// bypass empty rows
if (r["latitude"].ToString().Trim().Length == 0)
continue;
string Latitude = r["latitude"].ToString();
string Longitude = r["longitude"].ToString();
// create a line of JavaScript for marker on map for this record
Locations += Environment.NewLine + @"
path.push(new google.maps.LatLng(" + Latitude + ", " + Longitude + @"));
var marker" + i.ToString() + @" = new google.maps.Marker({
position: new google.maps.LatLng
(" + Latitude + ", " + Longitude + @"),
title: '#' + path.getLength(),
map: map
});";
i++;
}
// construct the final script
sJScript = @"<script type="text/javascript">
var poly;
var map;
function initialize() {
var cmloc = new google.maps.LatLng
(33.779005, -118.178985);
var myOptions = {
zoom: 11,
center: cmloc,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map
(document.getElementById('map_canvas'), myOptions);
var polyOptions = {
strokeColor: 'blue',
strokeOpacity: 0.5,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = poly.getPath();
" + Locations + @"
}
</script>";
return sJScript;
}
catch (Exception ex)
{
throw ex;
}
}