Can't load a map from the ASP.NET Page_Load() event
Hello,
In an ASP.NET 2.0 web application, I'd like to generate the map from the Page_Load() event.
I create a simple C# ASP.NET web application in Visual Studio .NET 2005 SP1
When I load the web form, the browsercorrectly displays the map, I can see the map in its place, but after a moment a message box appears, telling me that:
"Internet Explorer cannot open the Internet sitehttp://localhost/Testing/WebForm1.aspx"
"Operation aborted"
So I begin asking myself where's the problem ?
I would appreciate a hint.
Thank you very much!
The C# code is this:
protectedvoid Page_Load(
object sender,
EventArgs e)
{
StringBuilder output =newStringBuilder();
output.Append("<script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5'></script> ");
output.Append("<SCRIPT language='JavaScript'> ");
output.Append("var map = null;");
output.Append("map = new VEMap('myMap');");
output.Append("map.LoadMap();");
output.Append("</SCRIPT>");
ClientScript.RegisterStartupScript(this.GetType(),"LoadMapTest", output.ToString(),false);
}
The WebForm1.aspx is this:
<%
@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"Inherits="Testing.WebForm1" %>
<
html><
headrunat="server"><title>Testing Earth Map Control</title>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
</
head><
body><formid="form1"runat="server">
<div>
<divid="myMap"runat="server"style="z-index: 101; left: 72px; width: 882px; position: absolute;
top: 24px; height: 584px">
</div>
</div>
</form>
</body>
</html>
Hi,
Your idea works fantastic. Thank you very much!
Now I am able to load and generate a map from the Load_Page() ASP.NET event:
The C# code is this:
protected void Page_Load(object sender, EventArgs e)
{
double latitude = 42.098;
double longitude = -102.216;
string infoBoxTitle = "Pushpin title";
string infoBoxText = "Pushpin text";
StringBuilder output = new StringBuilder();
output.Append("<SCRIPT language='JavaScript'> ");
output.Append("function CreateMap()");
output.Append("{");
output.Append("map = new VEMap('myMap');");
output.Append("map.LoadMap();");
output.Append("AddPushPin("+latitude+","+ longitude+","+"'"+infoBoxTitle+"'"+","+"'"+infoBoxText+"'"+ ");");
output.Append("}");
output.Append("</SCRIPT>");
Page.ClientScript.RegisterStartupScript(this.GetType(), "LoadMapTest", output.ToString(), false);
}
The WebForm1.aspx is this:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Testing.WebForm1" %>
<
html><
head runat="server"> <title>Testing Earth Map Control </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5'></script>
<script>
var map = null;
function
OnLoadPage()
{
CreateMap();
}
function AddPushPin (latitude, longitude,infoBoxTitle,infoBoxText)
{
try
{
var pin = new VEShape(VEShapeType.Pushpin, new VELatLong(latitude,longitude));
pin.SetTitle(infoBoxTitle);
pin.SetDescription(infoBoxText);
map.AddShape(pin);
}
catch(ex)
{
alert("The pushpin could not be added.\r\nAn error has been encountered: '"+ex.message+"'");
}
}
</script>
</
head><
body onload ="OnLoadPage();"> <form id="form1" runat="server">
<div>
<div id="myMap" runat="server" style="z-index: 101; left: 72px; width: 882px; position: absolute;
top: 24px; height: 584px">
</div>
</div>
</form>
</body>
</html>
Hey guys the "operation aborted" error is caused when you try to manipulate the DOM before it has loaded.
The solution is to not execute any javascript that adds to the DOM, like the map load for example, until after the body has loaded.
You will notice all the examples for VE call the javascript in the body onload event.
you can also do something like this:
if (window.attachEvent) {
window.attachEvent("onload", Page_Load);
} else {
window.addEventListener("DOMContentLoaded", Page_Load, false);
}
or with MS ASP.NET AJAX use the
Sys.Application.add_load()
John.
Thanks JG for the reply but I have managed to find a solution...In the masterpage body on load event I use the same function to load and pass a couple of params accross (need to load two seperate maps on different pages) the map but also check to see id the div to hold the map is present on the page (this avoids errors). When the page with the correct div has been requested by the browser then the map loads on the relevent page...
masterpage
<body onload="LoadMap('mapGwynedd', 'mapVillage')">
myfile.js
function LoadMap(divGwynedd, divVillage)
{
//
// check the div is on the page to avoid errors...
//
elmG = document.getElementById(divGwynedd);
if(elmG) { ShowGwyneddMap(10); }
//
elmV = document.getElementById(divVillage);
if(elmV) { ShowVillageMap(); }
}
function ShowStreetlevel()
{
ShowGwyneddMap(16)
}
function ShowCountylevel()
{
ShowGwyneddMap(10)
}
It works a treat...but did give me a few sleepless nights. Thanks again.
