Stanley Yao's Blog

Playing with mapping service API is a lot of fun, especially the Virtual Earth 3D maps, on which you can adjust altitude, heading, pitch and so on and pan through the city downtown over the skyscrapers.  Google map and Microsoft Virtual Earth has similar JavaScript/AJAX interfaces.  Tried the MTGoogleMaps plug-in and it's quite good and easy to use.  There is one problem though when displaying, on IE, multiple maps by using multiple template tags on the same page.  The problem the tag will generate the same script-lets each time it appears on a page.  So there are multiple pairs of <div id="map"> and <script> in the resulting page, and the element ID of them are all the same - "map".  Although the element IDs are supposed to be unique across the page, but the browser will still try to render the page when there are ID collision.  However the result is not consistent on IE and Firefox.  Look at this example:

Element ID Collision

<div id="Div1" style="width: 100px; height: 100px">d1</div> <script type="text/javascript"> var v = document.getElementById("Div1"); alert(v.innerHTML); </script>     <div id="Div1" style="width: 100px; height: 100px">d2</div> <script type="text/javascript"> var v = document.getElementById("Div1"); alert(v.innerHTML); </script>

The above script-let will show "d1" and then "d2" on firefox, which suggests the space locality.  The closer element is picked when there are multiple elements with the same ID.  But on IE, "d1" will show up twice.

To fix this issue, firstly we need to move the <div> tag (hosting the map) generation into the client script so that we can generate tags with different IDs.  Secondly, use an array to keep track of all the map objects in case we need them later to further manipulate the maps.

Dynamic Map Object Generation without ID Collision

function CreateMap(width, height) {     // If there is no maps on this page at all, initilize the map array     if (!maps)     {         maps = new Array();         mapId = 0;     }         // Create a new map and append it to the array     var nextIdx = maps.length;     var nextDivId = "mapDiv" + nextIdx;     document.writeln('<div id="' + nextDivId + '" style="position:relative; width:' + width + '; height:' + height + ';"></div>');     var map = new VEMap(nextDivId);     maps[nextIdx] = map;     ++ nextIdx;         return map; } function GetMapByCoordinates(latitude, longitude) {     // ...     map = CreateMap(width, height);     map.LoadMap(new VELatLong(latitude, longitude));     // ... }