This blog will have all kinds of posts about Wally McClure. In it, there will be tons of .NET and computer programming posts as well as Wally's views on life in general. As you might guess, this site and blog help you get More Wally in your life. What more could anyone want? .NET, ADO.NET, ASP.NET, AJAX, Atlas, Microsoft AJAX Library, ASP.NET 2.0 AJAX Extensions, ............
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 Maps]( "ASP.NET AJAX with Google Maps")
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&v=2.x&key=........." 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><%@ 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&v=2.x&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><%@ 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&v=2.x&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>
About wallym
Wallace B. (Wally) McClure
INETA Speaker's Bureau
Microsoft MVP
ASPInsider
Co-author of "Beginning AJAX with ASP.NET"
Co-author of "Professional ADO.NET Programming"
Co-author of "Building Highly Scalable Database Applications with .NET"
Master's Degree in Electrical Engineering from Georgia Tech
Bachelor's Degree in Electrical Engineering from Georgia Tech