rich:virtualEarth presents a dynamically generated map based on the Microsoft Virtual Earth API. API is a pure Javascript library. So, you do not need to have any external program or plugin installed to make it working. The component allows to place the map on a page and define the initial parameters for it. You can use the Virtual Earth SDK to manipulate with the map after that. The following links helps you to be familiar to this technology:

• Virtual Earth Interactive SDK
• MSDN, Virtual Earth Map Control 5.0

VirtualEarth example

Dashboard: Remove Show Type: Road Aerial Hybrid Birdseye Zoom: In Out

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <f:view contentType="text/html">
            
        <style type="text/css">
            .col1 { width:510px; }
            .col2 { vertical-align: top; }
        </style>    

    
        <h:panelGrid columnClasses="col1, col2" columns="2">
        
            <rich:virtualEarth id="gm" style="width:500px"
                 lat="37.971796" lng="-122.042334" dashboardSize="Normal" 
                 zoom="17" mapStyle="Birdseye" var="map" />
            
            <h:panelGroup>
                Dashboard:<br />
                <a href="javascript:void(0);" onclick="map.HideDashboard();return false;">Remove</a>
                <a href="javascript:void(0);" onclick="map.ShowDashboard();return false;">Show</a>
                <br /><br />
                Type:<br/>
                <a href="javascript:void(0);" onclick="map.SetMapStyle(VEMapStyle.Road);return false;">Road</a>
                <a href="javascript:void(0);" onclick="map.SetMapStyle(VEMapStyle.Aerial);return false;">Aerial</a>
                <a href="javascript:void(0);" onclick="map.SetMapStyle(VEMapStyle.Hybrid);return false;">Hybrid</a>
                <a href="javascript:void(0);" onclick="map.SetMapStyle(VEMapStyle.Birdseye);return false;">Birdseye</a>
                <br /><br />
                Zoom:<br/>
                <a href="javascript:void(0);" onclick="map.ZoomIn();return false;">In</a>
                <a href="javascript:void(0);" onclick="map.ZoomOut();return false;">Out</a>
            </h:panelGroup> 
            
            
        </h:panelGrid>
        

        
    </f:view>
</ui:composition>

<<Hide Source

var attribute define a javascript variable you can use then as a reference to the map from your custom javascript.

lat and lng attributes define the initial latitude and longitude of the center of the map.

zoom attributes define the initial zoom. The available range from 1 to 19 (close look). The maximum might depend of the location.

mapStyle attributes define the initial map style. The available values for this attribute are "Road","Aerial","Hybrid","Birdseye". "Birdseye", they are available for the limited number of locations only.

Use style attribute to define the size of the map. For example, style="width:600px;height:400px".

Virtual Earth does not support xhtml format of the page. Thus, if you use Facelets and JSF 1.2, do not forget <f:view contentType="text/html"> somewhere on the page. To avoid re-initialization, do not re-render the component during Ajax updates.