Follow me on Twitter at Twitter.com/wbm
FYI, I'm blogging most of my stuff over at More Wally now.
You might want to add my rss feed to your reader at:http://morewally.com/cs/blogs/wallym/rss.aspx
ASP.NET Podcast Show #110 - Integrating ASP.NET AJAX with Google Maps - Wallace B. McClure

Wallace B. McClure

All About Wally McClure - The musings of Wallym on Web, HTML5, Mobile, Xamarin.iOS, Xamarin.Android, and Windows Azure.

News

Visual Studio Magazine Column Personal Blog

.NET

Book Authors

Business

Family

Friends

Georgia Tech Bloggers

Personal

Archives

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>  

Comments

Eric said:

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

# May 2, 2008 4:40 PM

Wallym said:

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:

aspnetpodcast.com/.../asp-net-podcast-110-integrating-asp-net-ajax-with-google-maps.aspx

# May 15, 2008 5:12 PM