Click here to Skip to main content
15,867,756 members
Articles / Web Development

Plot Path using Google Maps JavaScript API

Rate me:
Please Sign up or sign in to vote.
4.67/5 (8 votes)
31 Mar 2011CPOL2 min read 123.4K   5.5K   24   30
This article describes how to plot path on Google map using array of latitude & longitude points.

Introduction

I was looking for some code which pulls Google co-ordinates (latitude & longitude) from database and plot the respective path on my Google map. So I studied the Google Maps JavaScript API and implemented a function which reads the GPS co-ordinates from a ASP.NET Data Table and plots the path on page_load event.

Background

You may refer to this article for basic information about each function in Google maps JavaScript API.

map.png

Using the Code

I was able to plot the path between just two co-ordinates easily, using one of Google JavaScript API function. There are many articles on CodeProject which gave me a good understanding of how 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:

Step - 1

Create a Default.aspx page with the following content:

ASP.NET
<%@ 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>

Let me explain in brief how the Google Maps JavaScript API works in here. First, we add Google API JavaScript Reference in head tag:

JavaScript
<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"></script>   

Then, you place a block level element like div on the page, where you want the map to be shown:

ASP.NET
<div id="map_canvas" style="width: 100%; height: 100%;"></div>

Next, add a JavaScript function on onload event of html body tag as below:

ASP.NET
<body onload="initialize()"> 

Step - 2

Create a class GPSLib.cs Under App_Code directory & create the following function. I have declared the function and respective class (GPSLib) as static so it can be accessed directly without creating any object.

C#
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;
        }
    }

In the above code, we will be generating the necessary JavaScript code needed to create the map along with the plotting. The above function PlotGPSPoints() will return a string object with respective JavaScript code. You may find more information regarding how this script works here.

I am reading the values(latitude, longitude) from datatable row by row in a for loop and creating a 'Locations' string, which is nothing but JavaScript code. This code will be embedded in initialize() function.

Step - 3

Adding code to the page_load event of Default.aspx Page to display the plotted path using the function PlotGPSPoints(). I have manually created a DataTable with 2 columns Latitude & Longitude and added 3 rows and passed it to draw the path as below:

C#
if (!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("Latitude"));
            dt.Columns.Add(new DataColumn("Longitude"));

            DataRow row = dt.NewRow();
            row["Latitude"] = 33.779005;
            row["Longitude"] = -118.178985;
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Latitude"] = 33.879005;
            row["Longitude"] = -118.098985;
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Latitude"] = 33.979005;
            row["Longitude"] = -118.218985;
            dt.Rows.Add(row);

            js.Text = GPSLib.PlotGPSPoints(dt); ;
        }
    }

You may extract your co-ordinates from the database into a datatable with 2 columns latitude & longitude and pass it to GPSLib.PlotGPSPoints() function as parameter. The rest will be automatically taken care of.

Points of Interest

If you are inside a web application and trying to add a new class in App_Code folder, it will not be accessible until you set the value of Build Action property to 'Compile' instead of 'Content'. To do the same, select the class and hit F4 to view its properties.

History

  • GPSLib v1.1

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionRe: map doesnt show Pin
chanderandani1237-Jun-12 5:08
chanderandani1237-Jun-12 5:08 
AnswerRe: map doesnt show Pin
gowthamKunduru11-Oct-12 22:42
gowthamKunduru11-Oct-12 22:42 
GeneralThe points and paths are not working Pin
atilaca6-Jun-11 17:25
atilaca6-Jun-11 17:25 
I downloaded this code, but when I compile that, the map is showing, but the points (atitude & longitude) and the path are not showing... Somebody can help me? Confused | :confused:
GeneralRe: The points and paths are not working Pin
VaibhavTiparadi14-Jun-11 2:24
VaibhavTiparadi14-Jun-11 2:24 
GeneralRe: The points and paths are not working Pin
Greg Urata20-Jul-11 11:32
Greg Urata20-Jul-11 11:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.