Google Maps for JSF (GMaps4JSF) in JDeveloper 11G

A new version of GMaps4JSF was released. GMaps4JSF is a Google maps jsf component. This blog entry will show you how you can use it in your own 11g application.
In this example you can hide and show markers. Add markers from a backing bean and add an click event on these markers so when you click on a marker you will get an alert.

The first step to get this jsf component in JDeveloper 11g is to download the GMaps4JSF jar and import this jsp tag library in your own project.

You need your own api key. Use this url http://code.google.com/apis/maps/signup.html to get the api key
Now we are ready to use it. Change my api key in the javascript and use your own.
GMaps4JSF is a good start but it is not ready yet. You still need to write your own javascript and you can not click on a marker to see a description.For this you need to add an eventhandler and use javascript to fire something.

Here is the code for the JSF page. Very important that the method of the clientlistener starts with renderMap and add the id of the maps components to it else it won't work and the ADF splashscreen will not go away.

<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:yui="http://code.google.com/p/gmaps4jsf/">
  <jsp:directive.page contentType="text/html;charset=windows-1252"/>
  <f:view>
    <af:document title="test" id="document22">
      <af:clientListener method="renderMapmapPrincipal();" type="load"/>
      <f:facet name="metaContainer">
       <f:verbatim>
          <![CDATA[
            <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAM7FSGSscPTbXiOt1No2LPRSLP72-OZgzlwHUle6cA--KWDlXYxSMtxkbiwjRJ9xjiVAYHIVo1d0VkA">
            </script>
          ]]>
        </f:verbatim>
      </f:facet>
      <af:form id="form22">
        <af:panelGroupLayout>
          <f:verbatim>
            <![CDATA[  
                <script type="text/javascript">
                    function hideMarker() {
                        office1.hide();
                        office2.hide();
                    } 
    
                    function showMarker() {
                        office1.show();
                        office2.show();
                    }

                    function marker1ClickHandler() {
                        alert("You clicked on the headoffice");   
                    } 

                    function marker2ClickHandler() {
                        alert("You clicked on a office");   
                    }

                </script>
             ]]>
          </f:verbatim>
          <af:panelHeader text="Ordina Offices with GMaps4JSF">
            <af:panelSplitter inlineStyle="width:750px; height:550px;" splitterPosition="110">
              <f:facet name="first">
                <af:panelGroupLayout layout="vertical"
                                     xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
                  <f:verbatim>
                    <input type="button" value="Hide Offices"
                           onclick="hideMarker();"/>
                    <input type="button" value="Show Offices"
                           onclick="showMarker();"/>
                  </f:verbatim>
                  <af:panelGroupLayout/>
                </af:panelGroupLayout>
              </f:facet>
              <f:facet name="second">
                <yui:map id="mapPrincipal" width="500px" height="500px" zoom="7"
                         binding="#{GoogleBean.map}">
                  <yui:mapControl name="GLargeMapControl"
                                  position="G_ANCHOR_BOTTOM_RIGHT"/>
                  <yui:mapControl name="GMapTypeControl"/>
                </yui:map>
              </f:facet>
            </af:panelSplitter>
          </af:panelHeader>
        </af:panelGroupLayout>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>

The backing bean I used

package nl.ordina.google.backing;

import com.googlecode.gmaps4jsf.component.map.Map;
import com.googlecode.gmaps4jsf.component.marker.Marker;
import com.googlecode.gmaps4jsf.component.eventlistener.EventListener;

public class GoogleBean {
    private Map map;

    public void setMap(Map map) {
        this.map = map;
        map.setLatitude("52.05");
        map.setLongitude("5.11");

       
        Marker mark = new Marker();
        mark.setLatitude("52.05");
        mark.setLongitude("5.11");
        mark.setJsVariable("office1");
        mark.setId("mark1");
        EventListener event = new EventListener();
        event.setEventName("click");
        event.setJsFunction("marker1ClickHandler");
        mark.getChildren().add(event);
        map.getChildren().add(mark);

        Marker mark2 = new Marker();
        mark2.setLatitude("53.19");
        mark2.setLongitude("6.53");
        mark2.setJsVariable("office2");
        mark.setId("mark2");
        EventListener event2 = new EventListener();
        event2.setEventName("click");
        event2.setJsFunction("marker2ClickHandler");
        mark2.getChildren().add(event2);
        map.getChildren().add(mark2);

    }

    public Map getMap() {
        return map;
    }

}

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee">
  <application>
    <default-render-kit-id>oracle.adf.rich</default-render-kit-id>
  </application>
  <managed-bean>
    <managed-bean-name>GoogleBean</managed-bean-name>
    <managed-bean-class>nl.ordina.google.backing.GoogleBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>
</faces-config>