Downloading file blocks Javascript events?

Question

I am creating an .Net library with built-in WebBrowser control. The library is generally supposed to be handling google maps in other applications. Basically all essential Google maps API events are sent to my C# lib to be passed on to app using it.

Everything works great until application using my lib wants to change marker icon on click and perform different action on double click. In this case, application changes marker icon on C# level, which in turn invokes an Javascript function to change the icon on the map:

function SetMarkerIcon(id, imageUri) {
    markers[id].setIcon(imageUri);
 }

I debugged the problem to a conclusion that Javascript freezes until image file is downloaded and becomes unresponsive to a second click, which is supposed to trigger dblclick event. So my first question is if this is correct way of thinking.

Based on this assumption I tried to delay downloading of a file a bit by using setTimeout :

function SetMarkerIcon(id, imageUri) {
    setTimeout(function () { markers[id].setIcon(imageUri); }, 200);
 }

but obviously this solution is very 'dirty' (although works in test environment, in fact it worked on even 0ms delay while using local .js files, maybe because of a kind of separate thread setTimeout uses, but not with scripts on server), thus the second question: do you have any usable ideas how to solve this bug properly?

Sorry if question is a bit vague.

Answer 1

You can switch the marker's icon very fast by using sprites. You store all your icons as sprites in one file on regular grid positions. You load only once this file into the browser. You switch the icon by changing the origin of the sprite. Here is a prototypical implementation:

var pos = new google.maps.LatLng(0, 0);
var url = "/.../sprites.png";             // file with all icons as sprites
var size = new google.maps.Size(24, 24);  // size of 1 sprite
var origin = new google.maps.Point(0, 0);
var anchorPos = new google.maps.Point(12, 12);
var icon = new google.maps.MarkerImage(url, size, origin, anchorPos);
var marker = new google.maps.Marker({       
    position: new google.maps.LatLng(0, 0),       
    map: map,     
    icon: icon
}); 

marker.getIcon().origin = new google.maps.Point(5 * 24, 0);  // set the icon to the 5'th sprite