Popup Content on Demand

This Page is locked
Modified: 2007/01/12 05:45 by ViaVE Visitor
How to load Virtual Earth pushpin content on demand.

Full working example:


<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
      <script type="text/javascript">
     var map = null;
     var pinID = 1;
     
     function GetMap()
     {
        map = new VEMap('myMap');
        map.LoadMap();
     }   
     
     function AddPin()
     {   
        AddAJAXPin(map.GetCenter());
     }  
     
    function AddAJAXPin(latlon, icon_url, iconStyle)
    {
        var pin = new VEPushpin(pinID, latlon, icon_url, 
            pinID + "", "", iconStyle);
        VEPushpin.ShowDetailOnMouseOver = false;            
        VEPushpin.OnMouseOverCallback = PinHover;
        map.AddPushpin(pin);
    } 
        
    function PinHover(x, y, title, details)
    {            
        var ID = title;
        var DivID = "VPOP" + ID;
        var e=document.getElementById(ID+"_"+map.GUID);
        if(e!=null&&e!="undefined")
        {    
            window.ero.setBoundingArea(
            new Microsoft.Web.Geometry.Point(0,0),
            new Microsoft.Web.Geometry.Point(document.body.clientWidth,
                document.body.clientHeight));
            window.ero.setContent("<div id='" + DivID + "'>Loading...</div>");
            window.ero.dockToElement(e);
            getAJAXContent(ID,DivID);
        }
    }

    function getAJAXContent(ID,DivID)
    {
        //Get content from server based on the ID
        var mydate= new Date();
        var result = mydate.toTimeString();
        var resultDiv = document.getElementById(DivID);
        if(resultDiv!=null&&resultDiv!="undefined")
        {
            resultDiv.innerHTML = result;
        }  
    }

      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      <a href="#" onclick="AddPin();">Add a pushpin to the center of the map</a>
   </body>
</html>