Supporting Virtual Earth Maps in your web page - JonWhite's WebLog - Site Home

Adding maps to your web page can be a great tool to help determine locations. You can use Virtual Earth to serve up the maps based on geo location data.

Here's a html code sample for serving up virtual earth maps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Virtual Map</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
      <script type="text/javascript">
         var map = null;
         var qsParm = new Array();

         function GetMap()
         {

            qsParm['Lat'] = null;
            qsParm['Long'] = null;
            qs();

            // Get Lat & Long
            if (qsParm['lat'] && qsParm['long'])
            {
            }
            else
            {
                document.write("Missing Lat & Long");
                return;
            }

            map = new VEMap('myMap');
            var geolat = qsParm['lat']
            var geolong = qsParm['long']
            map.SetDashboardSize(VEDashboardSize.Normal);
            var latlong = new VELatLong(geolat,geolong);
            map.LoadMap(latlong, 20 ,'h' ,false);
            map.SetCenterAndZoom(latlong,15);
            return;
         }

        function qs()
        {
            var query = window.location.search.substring(1);
            var parms = query.split('&');
            for (var i=0; i<parms.length; i++)
            {
                var pos = parms[i].indexOf('=');
                if (pos > 0)
                {
                    var key = parms[i].substring(0,pos);
                    var val = parms[i].substring(pos+1);
                    qsParm[key] = val;
                }
            }
        }


      </script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>