Lazy Loading the Virtual Earth MapControl

Although I think the performance of the Virtual Earth MapControl is pretty good there may be cases when you want the web site without the map first and then load the map if and when needed. In these cases you can avoid the overhead of the Virtual Earth MapControl for the initial loading and inject it only when needed. Some call this process of injecting the JavaScript after the document body has been loaded also ‘lazy loading’. Here is how it’s done:

<!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 GetMap()
      {
         map = new VEMap('myMap');
         map.LoadMap();
      }   
      
      function LoadMapControl() 
      {
         var script = document.createElement("script");
         script.setAttribute("src", "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6");
         script.setAttribute("type", "text/javascript");
         document.documentElement.firstChild.appendChild(script);
         GetMap();
      }      
      </script>
   </head>
   <body>
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      <input type="button" value="Load VE MapControl" onclick="LoadMapControl();"/>
   </body>
</html>

Technorati Tags:

Advertisements
This entry was posted in Virtual Earth. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s