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