Getting Started with Virtual Earth and ASP.NET AJAX

Jan 24, 2008  • Mapping  • ASP.NET

About a month ago, I wrote an article titled “Virtual Earth: Getting Started - Adding a basic Map to a page”. In that article I explained the basics of using Virtual Earth with plain HTML and JavaScript. This time I’m going to explain the basics of using Virtual Earth with ASP.NET AJAX.

Virtual Earth and ASP.NET AJAX

Step 1: Create a new ASP.NET AJAX Web Site in Visual Studio 2005, or just an ASP.NET Web Site in Visual Studio 2008.

Step 2: Open up the Default.aspx page.

Step 3: Add a ScriptManager to the page.


<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>

```<font size="2" color="#0000ff"></font>



**Step 4:** Tell the ScriptManager to load the Virtual Earth API JavaScript file into the page. 



```html

<asp:ScriptManager runat="server" ID="ScriptManager1">

    <Scripts>

        <asp:ScriptReference Path="<a href="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6">http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6</a>" />

    </Scripts>

</asp:ScriptManager>

Step 5: Add a DIV to the page below the ScriptManager that will be the host for our Virtual Earth Map.


<div id="myMap" style="position:relative; width:600px; height:400px;"></div>

Step 6: Add a JavaScript method to the page that contains code for instantiating the map.


<script type="text/javascript">

    var map = null;



    function LoadMap()

    {

        map = new VEMap("myMap");

        map.LoadMap(new VELatLong(47.6, -122.33), 10, VEMapStyle.Road);

    }

</script>

Step 7: Add a line of JavaScript within the script block that attaches the LoadMap method to the application’s load event. With this in place the map will get loaded once the asp.net ajax application has finished loading within the browser.

Sys.Application.add_load(LoadMap);

Step 8: Run the page and you’ll have a basic Virtual Earth Map on it.

Complete Code For This Article

Default.aspx


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> 



<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">

<head runat="server">

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    

    <asp:ScriptManager runat="server" ID="ScriptManager1">

        <Scripts>

            <asp:ScriptReference Path="<a href="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6">http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6</a>" />

        </Scripts>

    </asp:ScriptManager>

    

    <div id="myMap" style="position:relative; width:600px; height:400px;"></div>

    

    <script type="text/javascript">

        var map = null;

        

        function LoadMap()

        {

            map = new VEMap("myMap");

            map.LoadMap(new VELatLong(47.6, -122.33), 10, VEMapStyle.Road);

        }

        

        // Attach our LoadMap method to get executed

        // when the Application has finished loading.

        Sys.Application.add_load(LoadMap);

    </script>

    

    </div>

    </form>

</body>

</html>

Conclusion

If you compare this article with the “Virtual Earth: Getting Started - Adding a basic Map to a page” article, you’ll see that there aren’t very many differences in how you place a Virtual Earth Map on the page. The only big differences are: 1) you can use the ScriptManager in ASP.NET AJAX to include the VE API script in the page, and 2) ASP.NET AJAX makes it easier to attach a method to get executed when the page/application has loaded.