locked
Dynamically loading virtual earth's javascript after load RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    Hello
    I have a page with a virtual earth map on it, but my users are complaining that the page is too slow to load. So I would like to make the map appear only when some event is triggered. This is no problem, but the longest part of getting virtual earth map up is the main javascript call: http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6 . I am trying to have this also load only on request so as not to impact performance if they dont care to see a map. I have tried inserting the code into the body, or head like such:


    Code Snippet

    var e = document.createElement("script");
    e.src = 'http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6';
    e.type="text/javascript";
    document.getElementsByTagName("body")[0].appendChild(e);


    And I do see the javascript loading, but the maps fail to work. Is there something I am missing?

    -auz
    Friday, February 22, 2008 5:31 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    The issue is that the code that is being called to load the map is processing before the mapcontrol finishes loading. A work around for this is to have a time out reight after the code to load the map control thus giving it time to laod. The following is an example of how you might go about doing this.

    Code Snippet


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <script type="text/javascript">
             var map = null;
             
             function loadMap()
             {
                var url = "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6";
                var e = document.createElement("script");
                   e.src = url;
                   e.type="text/javascript";
                   document.getElementsByTagName("head")[0].appendChild(e);
                  setTimeout("GetMap()",1000);  
             }
            
             function GetMap()
             {
                map = new VEMap('myMap');
                map.LoadMap();
             }
          </script>
       </head>
       <body >
          <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
          <INPUT id="load" type="button" value="Load Map" name="load" onclick="loadMap();">
       </body>
    </html>


    Friday, February 22, 2008 3:36 PM
    Moderator

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    The issue is that the code that is being called to load the map is processing before the mapcontrol finishes loading. A work around for this is to have a time out reight after the code to load the map control thus giving it time to laod. The following is an example of how you might go about doing this.

    Code Snippet


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <script type="text/javascript">
             var map = null;
             
             function loadMap()
             {
                var url = "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6";
                var e = document.createElement("script");
                   e.src = url;
                   e.type="text/javascript";
                   document.getElementsByTagName("head")[0].appendChild(e);
                  setTimeout("GetMap()",1000);  
             }
            
             function GetMap()
             {
                map = new VEMap('myMap');
                map.LoadMap();
             }
          </script>
       </head>
       <body >
          <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
          <INPUT id="load" type="button" value="Load Map" name="load" onclick="loadMap();">
       </body>
    </html>


    Friday, February 22, 2008 3:36 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote
    Also, if you put the standard script tag for loading the map control at the bottom of your web page instead of the head, it will load after the page has been loaded. This will allow the user to view the page and it would appear to be loaded it would load the javascript last. Also note for general performance, load your CSS in the head and any javascript at the bottom of your page. This will allow your page to render on the fly an make the loading appear faster. Loading your javascript in the head causes the rest of the page to wait for the javascript to load.
    Friday, February 22, 2008 3:45 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote
    I use a similar idea to the timeout Richard uses. I put a check to see if VEMap exists before trying to load the map. If it doesnt then I try the function again in a few seconds. This gets around the possiblity that the users connetion is poor and their load time is greater than the timeout time. There is probably a variable or function later in the js which would be better to check for, but this works as far as I have tested it. Here is a snippet (part of my js class):

    Code Snippet

    drawmap: function() {
       if(window.VEMap === undefined)
          {
              //not loaded ms map yet, try again in a few seconds
              var t = this;
              setTimeout(function() { t.drawmap(); }, 5000);
          }
          else
          {
           this.map = new VEMap(this.mapdivname);
           this.map.onLoadMap = this.mapLoaded;
           this.coords = new VELatLong(this.lat, this.long);
           this.map.LoadMap(this.coords, this.zoom, VEMapStyle.Birdseye);
          }
      },



    This works in all browsers except IE6. I'm starting to think that IE6 will not execute the script that is inserted after the page loads. Any idea of a work around for ie6? Should I try passing the js via ajax and eval()'ing it?

    thanks
    -auz

    (I have had the virtual earth js at the bottom of my html, but it still makes the browser unresponsive while loading.)
    Friday, February 22, 2008 8:15 PM
  • Question
    Sign in to vote
    0
    Sign in to vote

    We played with this quite heavily back in the V3 days but it is problematic. Now that the javascript is compressed to about 180KB and cached its not as big an issue but still takes 5 sec of loading time the first time.

    Different browsers offer diiferent ways of doing this, IE7 and FF can actually listen for an onload event to be fired, IE6 can not.

    What would be the best solution? What if the last line of the VE javascript checked for a VEAPIonloaded function and triggered that method if it existed? This would make it really simple to just include the script on demand and wire up the function to be called.

    John.

     

    Saturday, February 23, 2008 1:05 AM
    Moderator