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: