Truly Microsoft Virtual Earth is one cool piece of technology. The API offers ASP.NET developers a great deal of customization. However, after struggling to create mashups with it, I can say that it was not created with Front End developers in mind. If you've ever tried to include custom JavaScript to run on the same page as Virtual Earth, you know what I'm talking about. It seems like Virtual Earth just won't let you get anything in edge wise -- very frustrating.

For the first time I decided to investigate what Virtual Earth was doing that preventing any of my JavaScript events from firing. Running it in Firefox and watch the console, I noticed that Virtual Earth is constantly firing postbacks every few milliseconds. The image below illustrates this:

Virtual Earth loads when the page loads and then starts firing these postbacks non-stop. Since most custom JavaScript needs to fire right after page load, Virtual Earth's behavior creates a situation where you can never get to run your script(s). I did discover one sneaky way to get arround this. As part of the JavaScript that is used to launch Virtual Earth on a page you will find the following code block:

   1: function CreateMap() {

   2:     map = new VEMap('VEMap');

   3:     map.onLoadMap = EventMapLoad;

   4:     map.LoadMap();

If you want to fire off your JavaScript, you can insert your launch script inside this block, either before or after the VE specific parts:

   1: function CreateMap() {

   2:     // Your custom handler here

   3:     myCustomJavaScriptHandler();

   4:     // Virtual Earth stuff here

   5:     map = new VEMap('VEMap');

   6:     map.onLoadMap = EventMapLoad;

   7:     map.LoadMap();

   8: }

In my case, I needed to attach events to DOM elements to get a MouseOver/MouseLeave and MouseDown/MouseUp UX effect. Because of the constant postbacks, I wasn't able to query the DOM to get pointers to nodes.In the end it turned out to just be easier to attach a bunch of onmouseover, onmouseleave, onmousedown and onmouseup events directly to the elements:

   1: <asp:LinkButton ID="FindPlaceButton" CssClass="FindPlaceButton" runat="server" onmouseover="findPlaceOver()" 

   2: onmouseout="findPlaceOff()" onmousedown="findPlaceDown()" onmouseup="findPlaceOff()" />

Unfortunately this required individualized functions for each event for each element, but luckily I didn't need to do this for too many elements. This second approach precludes the possibility of modular, efficient code with reuse, but it works.

So, depending on what kind of JavaScript you need to accomplish when Virtual Earth is on the page, you can try either of these two routes.