Creating  a Google map by fetching data from the MS SQL


 Using one of Google JavaScript API function. There are many articles on  the Google Maps JavaScript API works. However, there was no article I found which pulls series of co-ordinates from a database or datatable and plots a continuous path on the run. I have explained in steps how to do the same as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;

/// <summary>
/// Summary description for GPSLib
/// </summary>
public static class GPSLib
{
    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["Logitude"].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
                                                       });

                                                       infowindow.open(map,marker" + i.ToString() + @");
                                                       google.maps.event.addListener(marker" + i.ToString() + @", 'click', function() {
                                                        infowindow.open(map,marker" + i.ToString() + @");
                                                      }); ";

                i++;


            }


            // construct the final script
            sJScript = @"<script type='text/javascript'>
            var poly;
            var map;

        function initialize() {
                var cmloc = new google.maps.LatLng(18.964700,72.825800);
             
            var myOptions = {
                    zoom: 9,
                    center: cmloc,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                };

         
            var infoWindow = new google.maps.InfoWindow();
            map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

            var infowindow = new google.maps.InfoWindow({
              content: ('Latitude:' +document.getElementById('Latitude')+'<br>Logitude'+document.getElementById('Longitude'))
              });

            var polyOptions = {
                    strokeColor: 'blue',
                    strokeOpacity: 0.5,
                    strokeWeight: 3,
                    fillcolor:'blue',
                    fillOpacity:0.4          
                 
                }
                poly = new google.maps.Polygon(polyOptions);
                poly.setMap(map);
           

                var path = poly.getPath();
                  " + Locations + @"
        }
                </script>";
            return sJScript;
        }


        catch (Exception ex)
        {
            throw ex;
        }
    }
}