JSF 2.0 The GMAPS4JSF in the Ajax world

Brief introduction

GMAPS4JSF is designed to integrate Google maps and JavaServer Faces (JSF), so that JSF developers can construct complex Panorama street maps using only a few JSF tags. You can also easily add several different components (tags, informational text, controls, surface overlays, polygons, multi-line lines) to the map. GMAPS4JSF can also add different server-side and client events to the component without writing JavaScript code to bind the events and components. You only need to write JavaScript code when implementing a client-side event handler for a component.

Ajax is the main technology in any contemporary WEB application. Although Ajax was not introduced in earlier versions of JavaServer Faces, many JSF component libraries (such as Apache myfaces Trinidad, JBoss RichFaces, ICEfaces, and so on) can also provide Ajax. The good news is that Ajax native support has been provided in the JSF 2.0 implementation.

In this article, I described how to configure GMAPS4JSF in a JSF 2.0 application and briefly introduced JSF 2.0 Ajax. Finally, I demonstrated how to build a simple mashup application using GMAPS4JSF and JSF 2.0 Ajax.

Using JSF 2.0 application Configuration GMAPS4JSF

First, use the JSF 2.0 application configuration GMAPS4JSF. To do this:

Register the Google Maps API. You need to accept the use protocol and register the site where the application will be used. Then, Google will provide a key for your application.

Figure 1. Register Google Maps API

In order to use the Google Maps API, you must include the Google Maps API on the page. Listing 1 shows the Google Maps API script that must be included in the

Listing 1. Header file code containing the Google Maps API

　　　 <script
　　　　　 src="http://maps.google.com/maps?file=api&amp;v=2&amp";
　　　　　 key="gen_website_key"
　　　　　 type="text/javascript">
　　　 </script>


In the code in Listing 1, you need to replace the phrase "Gen_website_key" with the key provided at registration. Figure 2 shows an example of this key on the Google Maps Web site and how it fits into your code.

Figure 2. Add the pages