ASP.NET Podcast Show #110 - Integrating ASP.NET AJAX with Google Maps

Original Url: http://aspnetpodcast.com/CS11/blogs/asp.net_podcast/archive/2008/05/01/asp-net-podcast-110-integrating-asp-net-ajax-with-google-maps.aspx

Subscribe

Download - WMV - PC Video.

Download M4V - iPod Video.

Download MP3 - Audio Only.

ASP.NET AJAX with Google MapsShow 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:

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

2 Comments

  • Wow, how 'bout some code formatting for your readers - that is rough.

  • Eric - yeah, that is a problem. I put it in the CS editor and everything looks correct. I post the code and it looks like crap. The post is correct here:

    http://aspnetpodcast.com/CS11/blogs/asp.net_podcast/archive/2008/05/01/asp-net-podcast-110-integrating-asp-net-ajax-with-google-maps.aspx

Comments have been disabled for this content.