Virtual Earth + ASP.NET AJAX Now Fixed in Safari

May 17, 2008  • Mapping

A couple months ago I blogged about the fact that using Virtual Earth and ASP.NET AJAX together on the same page caused errors in Safari. There is good new to report back, the latest update to Virtual Earth has fixed this issue. In fact Virtual Earth v6.1 actually includes much better Safari support that previous versions; it actually works correctly in Safari. I found this to be especially helpful since I can now support Safari with my Web.Maps.VE product.

What’s the catch? I can’t work perfectly now can it. Well, as far as I can tell Virtual Earth works great. However, the code example in my post calling attention to the error actually still has a little bug in it. The bug is the calendar that is automatically shown on hover over by the AjaxControlToolkit CalendarExtender get hidden by the Map below the textbox. This is actually caused by a layering issue related to the z-index of the elements on the page. An easy way to fix this is to just set the z-index of the VEMap’s DIV element to a lower value so all other elements on the page will be rendered over the top of it.

Here’s the full example code showing example what I mean above:

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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 id="Head1" runat="server">

<title>Untitled Page</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="<a href="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script">http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script</a>>

<script type="text/javascript">

    var map = null;

    function GetMap()

    {

        map = new VEMap('myMap');

        map.LoadMap();

    }

</script>

</head>

<body onload="GetMap();">

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

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

<div>

<asp:TextBox runat="server" id="txtDate"></asp:TextBox>

<ajaxToolkit:CalendarExtender runat="server" ID="CalendarExtender1" TargetControlID="txtDate"></ajaxToolkit:CalendarExtender>





<div id='myMap' style="position:relative; width:400px; height:400px; z-index: -100;"></div>

</div>

</form>

</body>

</html>