Show Google Maps using Latitude and Longitude in ASP.Net

on
Hi,

Show Google Maps using Latitude and Longitude in ASP.Net

Below code is for Tracking Truck in Google Maps in ASP.NET from database lat and lng values.

Database.

ASPX Code
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TrackScreen.aspx.vb" Inherits="TrackScreen" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <title></title>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">

var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
            {
            "AVLID": '<%# Eval("AVLID") %>',
            "lat": '<%# Eval("Latitude") %>',
            "lng": '<%# Eval("Longitude") %>',
            "AStatus": '<%# Eval("AStatus") %>',
            "Speed": '<%# Eval("Speed") %>',
            "Make": '<%# Eval("Make") %>',
            "Model": '<%# Eval("Model") %>',
            "Supplier": '<%# Eval("Supplier") %>',
            "Type": '<%# Eval("Type") %>',
            "ReportType": '<%# Eval("ReportType") %>',
            "BatteryVolt": '<%# Eval("BatteryVolt") %>',
            "HeadinDemo1": '<%# Eval("HeadinDemo1") %>',
            "OriginDemo": '<%# Eval("OriginDemo") %>',
            "DestiDemo": '<%# Eval("DestiDemo") %>',
            "Driver": '<%# Eval("Driver") %>',
            "DriverMobile": '<%# Eval("DriverMobile") %>',
            "PK_AvlID": '<%# Eval("PK_AvlID") %>'
          }
</ItemTemplate>
<SeparatorTemplate>
    ,
</SeparatorTemplate>
</asp:Repeater>
];
</script>
<script type="text/javascript">
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER
    }
        };
   

        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,
                animation:google.maps.Animation.BOUNCE,
                icon: {
                    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                    strokeColor: data.ReportType,
                    scale: 7
             }
           
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent("<b><font size='3'>Truck Reg No.:<u> " + data.PK_AvlID + "</u><br/><br/>AVL No.:<u> " + data.AVLID + "</u><br/><br/>Latitude: " + data.lat + "<br/><br/>Longitude: " + data.lng
                    + "<br/><br/>Origin: " + data.OriginDemo + "<br/><br/>Destination: " + data.DestiDemo + "<br/><br/>Status: " + data.AStatus + "<br/><br/>Battery volt: " + data.BatteryVolt + "<br/><br/>Speed: " + data.Speed + "<br/><br/>Heading: " + data.HeadinDemo1 + "<br/><br/>Make: " + data.Make
                    + "<br/><br/>Driver: " + data.Driver  +"<br/><br/>Driver Mobile No.: " + data.DriverMobile + "</font>");
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }
</script>
</head>
<body >
    <form id="form1" runat="server">
   
     <div id="dvMap" style="width:1365px; height: 730px">
     
    </div>

    </form>
</body>
</html>

ASPX.VB

 Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

Partial Class TrackScreen
    Inherits System.Web.UI.Page

 Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = Me.FetchGPSInfo("select * from tbl_Tracking")
        rptMarkers.DataSource = dt
        rptMarkers.DataBind()
    End If
End Sub

  Private Function FetchGPSInfo(query As String) As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constring").ConnectionString
    Dim cmd As New SqlCommand(query)
    Using con As New SqlConnection(conString)
        Using sda As New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using dt As New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function
End Class


Output






Comments

Post a Comment