Adding a Google Map to the Sample JSF Catalog Application

This example demonstrates adding a Map to the Sample Store Catalog Application using JAX-WS, JSF, EJB 3.0, and Java using the BluePrints JSF Google Map Viewer Component.
Download the Sample Application Code

Explanation of the functionality of the Blueprints JSF Ajax Map Component in a sample Store Catalog Application

The image below shows the Catalog Item Detail page, which displays a Store item's details.


When the user clicks on the Seller's Location hyperlink, a Google Map for the location is displayed as shown below:


Explanation of the usage of the Blueprints JSF Ajax Map Component in the JSF Catalog Web Service client.

The JSF Store UI is a separate web application which is a JAX-WS client. To learn more about this App read the  Sample Store Catalog Application using JAX-WS, JSF, EJB 3.0, and Java, and for more information on the JSF part of this code seethis previous blog.


However this JSF map component could be added to any JSF client, for example it could also be added to these sample JSF  apps:  Sample Application using JSF, Seam, and Java Persistence APIs on Glassfish, Sample Application using JSF, Catalog Facade Stateless Session, and Java Persistence APIs, Sample Application using JSF, Spring 2.0, and Java Persistence APIs on Glassfish.

In the Detail.jsp web page, the Seller's Location hyperlink is defined as shown below:

Code Sample from:  Detail.jsp

     #{}, #{item.item.address.state}"/>

A JSF commandLinkis  used to provide a link to click on to display a Google map corresponding to the addressdisplayed by the valuetag. The commandLinktag represents an HTML hyperlink and is rendered as an HTML <a> element. The commandLinktag is used to submit an action event to the application. This commandLink action attribute references a MapBeanManagedBean which is defined in the faces-config.xml file:

Code Sample from: faces-context.xml


The MapBeanmapActionmethod gets the longitude and latitude for the address  and returns the logical outcome String map, which causes the navigation to go to the map.jsp page. This MapBeanmapActionmethod is defined as shown below:

Code Sample from:
import com.sun.j2ee.blueprints.ui.geocoder.GeoCoder;
import com.sun.j2ee.
import com.sun.j2ee.
import com.sun.j2ee.
import javax.faces.context.FacesContext;

public class MapBean {

    private MapMarkermapMarker=new MapMarker();
    private MapPointmapPoint=new MapPoint();
    private String location="";

MapMarker[] getLocations() {
        return new

    public String mapAction() {
        // get the ItemController ManagedBean
ItemControlleritemController = (ItemController)
        Address address = itemController.get
location=address.getStreet1() + COMMA + address.getCity()+ COMMA + address.getState() +
           COMMA + address.getZip();
        return findLocation();

    public String findLocation() {
        GeoCodergeoCoder=new GeoCoder();
        // use
blueprints GeoCoder to get points based on location (this uses Yahoo's map service)
        return "map";

In the mapActionmethod, the FacesContextis used to get the ItemControllerin order to get the current store Item'sAddress.Then the findLocation is called, which uses the blueprintsGeoCodercomponent. The blueprints GeoCoderuses the Yahoo map service to verify the entered address and to get the exact latitude and longitude. 

The JavaServer Faces NavigationHandlermatches the logical outcome,  map against the navigation rules in the application configuration resource filefaces-config.xml to determine which page to access next. In this case, the JavaServer Faces implementation loads the map.jsp page after this method returns.

Code Sample from: faces-config.xml


In the map.jsp the blueprints JSFmapViewercomponent uses the latitude and longitude to render the Google map :

Code Sample from: Map.jsp

<%@taglib prefix="ui" uri="" %>

<ui:mapViewerid="mapViewerx" center="#{MapBean.mapPoint}" info="#{MapBean.mapMarker}"
           markers="#{MapBean.locations}" zoomLevel="4" style="height: 500px; width: 700px"/>

The mapViewercomponent uses the MapBeanto provide the necessary information, which was returned from theGeoCodercomponent's Yahoo lookup,  to render the Google map. 

The mapViewercenter attribute is populated by a com.sun.j2ee.blueprints.ui.mapviewer.MapPointwhich is accessed through the MapBeanbacking bean.  The mapPoint is used to center the map utilizing the latitude and longitude from themapPoint.

The mapViewerinfoattribute holds the address string text that is printed in the information balloon that is shown with the map.

The mapViewermarkersattribute holds an Array of  com.sun.j2ee.blueprints.ui.mapviewer.MapMarkerobjects that represent points to be  identified on the map.  This example only populates the Array with the first point returned from the GeoCoder.

See How to Use the Map Viewer and GeoCoder Components for more information on this.


This concludes how to add the Blueprints JSF Map Viewer  component to the sample JSF Store UI.

Running the Sample Application on Glassfish:

  • Downloadand install GlassFish V2, following the instructions on the download page. Alternatively you can use Sun Java System Application Server PE 9, Sun's GlassFish distribution.
  • Download and install NetBeans 5.5.1
  • Download the Sample Application Code
  • install Glassfish and Netbeans 5.5.1.  Then add the glassfish application server to Netbeans.

To Open and Test Run the sessionpagination Project:

  • Open the Netbeans sessionpagination project: In Netbeans under File Open Project... go to the directory where you unzipped the sample and select the sessionpagination project.
  • If you get a message that says unresolved references, right click on the project and select Resolve Reference Problems. Use the Resolve Reference Problems dialog to map the ejb and web modules to their project, which are subdirectories beneath the sessionpagination directory.
  • After the references are resolved, right-click the sessionpagination project and select Open Required Projects.
  • If the web module says unresolved references, right-click the sessionpagination-Web module and select Resolve Reference Problems:
  • Browse to the sessionpagination-ejb directory which is a sub-directory below the sessionpagination directory and select Open Project Folder.
  • If you don't have any resolve reference problems errors then ignore those steps.
  • Starts the application server, or at least connect to the database, because the run script for this application will also create the database tables, and this will fail if the database is not started.
  • Right-click the project node and choose Run Project.
    The Netbeans IDE starts the application server, builds the application, and opens the web context page in your browser. This application also has a local JSF client in the war of the application which will be displayed.
  • To go to the web client Tester application provided by the Glassfish Application Server use the url :  http://host:8080/CatalogService/Catalog?Tester. You should see the tester page. For the getItems operation type in integer the integers 0, 5 as input and click on the getItems button. This will return a list of  items 0 through 5.

To Open and Test Run the sessionpagination-wsclient Project:

  • Open the Netbeans sessionpagination-wsclient project: In Netbeans under File Open Project... go to the directory where you unzipped the sample and select the sessionpagination-wsclient project.
  • If the sessionpagination-wsclient project says unresolved references, right-click the libraries node, select add JAR/Folder, browse to the lib directory under the sessionpagination-wsclient and add the bp-ui-14.jar, commons-logging-1.1.jar, and the shale-remoting.jar files.
  • Right-click the project node and choose Run Project.
    The Netbeans IDE  builds the application, and deploys it.
  • When you run the project, your browser should display the opening page of the application at http://localhost:8080/sessionpagination-wsclient/