Click here to Skip to main content
Click here to Skip to main content
Go to top

Plot Path using Google Maps JavaScript API

, 31 Mar 2011
Rate this:
Please Sign up or sign in to vote.
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:

<%@ 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:

<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:

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

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

<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.

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:

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)

Share

About the Author

indianDEV
Technical Lead
India India
No Biography provided
Follow on   Twitter

Comments and Discussions

 
QuestionWant to use this in web platform PinmemberMember 1084617026-May-14 23:38 
AnswerRe: Want to use this in web platform PinmemberVaibhav Tiparadi27-May-14 0:08 
GeneralRe: Want to use this in web platform PinmemberMember 1084617027-May-14 0:18 
QuestionHow to draw a route between two markers in Google Maps API? PinprofessionalRavi.Kumar02117-Jan-14 7:44 
QuestionCan you pls do it in MVC3 PinmemberRAMESHVELAYUDHAN18-Apr-13 1:27 
Questionset panTo auto-zoom on marker's click? PinmemberMember 98158386-Feb-13 18:52 
SuggestionResolve maps does not show up PinmemberJohn Tang17-Jan-13 22:51 
GeneralRe: Resolve maps does not show up PinmemberRAMESHVELAYUDHAN9-Apr-13 2:53 
Questioni aspect from you Pinmembertwinkle 283-Oct-12 23:36 
NewsResolved the Map Display Issue PinmemberVaibhav Tiparadi2-Oct-12 20:34 
Questionmap does not work Pinmembertwinkle 2827-Sep-12 21:58 
AnswerRe: map does not work PinmemberVaibhav Tiparadi27-Sep-12 22:05 
QuestionLatitude And Longitude How can set on code on map basis PinmemberMuhammad Paryal16-Dec-11 2:18 
AnswerRe: Latitude And Longitude How can set on code on map basis PinmemberVaibhav Tiparadi16-Dec-11 8:30 
Questionmap doesnt show PinmemberMember 81305622-Aug-11 4:29 
AnswerRe: map doesnt show PinmemberVaibhav Tiparadi16-Dec-11 8:33 
GeneralRe: map doesnt show PinmemberMember 183650510-May-12 20:01 
QuestionRe: map doesnt show Pinmemberchanderandani1237-Jun-12 5:08 
AnswerRe: map doesnt show PinmembergowthamKunduru11-Oct-12 22:42 
GeneralThe points and paths are not working Pinmemberatilaca6-Jun-11 17:25 
GeneralRe: The points and paths are not working PinmemberVaibhav Tiparadi14-Jun-11 2:24 
GeneralRe: The points and paths are not working PinmemberGreg Urata20-Jul-11 11:32 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 31 Mar 2011
Article Copyright 2011 by indianDEV
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid