ASP.NET Podcast

Subscribe <-- What everyone should be doing

Download - WMV - PC Video.

Download M4V - iPod Video.

Download MP3 - Audio Only.

Show Notes:

• Integrate ASP.NET AJAX with Google Maps.
• Google Key.
• Web Services.
• Returning Data.
• Setting up the Map.
• Adding points to the Map. 
• Clearing the Map.

Web Service Code:

using System;

using System.Collections;

using System.Collections.Generic;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Web.Script.Services;

 

/// <summary>

/// Summary description for GetMapData

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService]

public class GetMapData : System.Web.Services.WebService {

 

    public GetMapData () {

 

        //Uncomment the following line if using designed components

        //InitializeComponent();

    }

 

    [WebMethod]

    [GenerateScriptType(typeof(MapData))]

    public MapData MapData()

    {

        MapData md = new MapData();

        LatLon ll = new LatLon();

        ll.Lat = 36;

        ll.Lon = -84;

        md.Center = ll;

        md.ZoomLevel = 8;

        return (md);

    }

 

    [WebMethod]

    [GenerateScriptType(typeof(PointData))]

    public PointData[] GetPointData(int PointCount,

        double ULLat, double ULLon,

        double LRLat, double LRLon)

    {

        int i = 0;

        double PTLat, PTLon;

        double LatDelta, LonDelta;

        Random rd = new Random();

        PointData pd;

        LatLon ll;

        List<PointData> pdl = new List<PointData>();

 

        LatDelta = ULLat - LRLat;

        LonDelta = ULLon - LRLon;

 

        for (i = 0; i < PointCount; i++)

        {

            pd = new PointData();

            ll = new LatLon();

            ll.Lat = LRLat + LatDelta * rd.NextDouble();

            ll.Lon = LRLon + LonDelta * rd.NextDouble();

            pd.Location = ll;

            pd.Description = "Point number: " + i.ToString();

            pdl.Add(pd);

        }

        return (pdl.ToArray());

    }

}

 

public class MapData

{

    public LatLon Center;

    public int ZoomLevel;

}

 

public class LatLon

{

    public double Lat;

    public double Lon;

}

 

public class PointData

{

    public LatLon Location;

    public string Description;

}

ASPX Page Code:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Google_Default" Title="Google Maps Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div id="MapDiv" style="width:450px; height: 350px;" >

</div>

 

<br />

<div id="MapInfo"></div>

<script language="javascript" type="text/javascript">

var Map;

function pageLoad()

{

    GetMapData.MapData(SetupMap);

}

 

function SetupMap(result)

{

    var Lat = result.Center.Lat;

    var Lon = result.Center.Lon;

    var ZoomLevel = result.ZoomLevel;

    var Bounds, sw, ne;

    Map = new GMap($get("MapDiv"));

   

    Map.addControl(new GSmallMapControl());

    Map.addControl(new GMapTypeControl());

    Map.setCenter(new GLatLng(Lat, Lon), ZoomLevel);

    Bounds = Map.getBounds();

    sw = Bounds.getSouthWest();

    ne = Bounds.getNorthEast();

    $get("MapInfo").innerHTML="SW Point: " + sw + "<br />" + "NE Point: " + ne + "<br />";

    GEvent.addListener(Map, "dragend", MapMoved);

    GEvent.addListener(Map, "zoomend", MapZoomed);

    GetMapData.GetPointData(10, sw.lat(), ne.lng(), ne.lat(), sw.lng(), GetDataSuccess);

}

function MapMoved(){

    var Bounds, sw, ne;

    Bounds = Map.getBounds();

    sw = Bounds.getSouthWest();

    ne = Bounds.getNorthEast();

    Map.clearOverlays();

    GetMapData.GetPointData(10, sw.lat(), ne.lng(), ne.lat(), sw.lng(), GetDataSuccess);

}

function MapZoomed(OldZoomLevel, NewZoomLevel)

{

    MapMoved();

}

function GetDataSuccess(result)

{

    var i = 0;

    $get("MapInfo").innerHTML = "";

    for(i=0;i<result.length;i++)

    {

        var pt = new GLatLng(result[i].Location.Lat,

            result[i].Location.Lon);

        Map.addOverlay(DisplayPointMarker(pt, result[i].Description));

        $get("MapInfo").innerHTML += "Point Location - Lat: " +

            result[i].Location.Lat + " Lon: " + result[i].Location.Lon + "<br />";

    }

}

 

function DisplayPointMarker(point, Description)

{

    var gmrker = new GMarker(point);

    var Message = Description

    GEvent.addListener(gmrker, "click", function(){

        Map.openInfoWindowHtml(point, Message);

    });

    return(gmrker);

}

</script>

</asp:Content>

 

MasterPage.master source code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

 

<!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">

    <title>ASP.NET Podcast Mapping Page</title>

    <asp:ContentPlaceHolder id="head" runat="server">

    </asp:ContentPlaceHolder>

    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAA_mrKwezGRvHyiI2zD3-QjxQyvuBphQwgXhP_kHK6Ww2QlMKTbxQ3mY6sQnMU6V5PMK8wQzOfhkt_Vw" language="javascript" type="text/javascript"></script>

    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>

 

</head>

<body onunload="GUnload()">

    <form id="form1" runat="server">

    <asp:ScriptManager ID="sm" runat="server">

        <Services>

            <asp:ServiceReference Path="~/GetMapData.asmx" />

        </Services>

    </asp:ScriptManager>

    <div>

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

       

        </asp:ContentPlaceHolder>

    </div>

    </form>

</body>

</html>