Pages

Tuesday, September 23, 2008

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>

18 comments:

  1. I am having a problem with this implementation of GMaps4JSF in my setup and was curious if someone could help. Using code almost identical to this (except without RichFaces), I am encountering the error: Duplicate component ID '_id0:_id2' found in view. I have set the scope to request for my mapBean, however this did not solve the problem.

    Thanks,
    swilly

    ReplyDelete
  2. Hi,

    can you post your code.

    Thanks Edwin

    ReplyDelete
  3. Hi,

    did you find out something about that problem with af:document?
    I´m trying to solve this problem because my page template uses "af:document" tag and the map doesn´t appear.

    Thanks,

    Josué Saraiva.

    ReplyDelete
  4. Hi

    I don't if GMaps4JSF is opensource then we can take a look at the taglib else we can contact the developer.

    and send a jdev test project to him.

    ReplyDelete
  5. Hi Edwin,

    I got the solution to problem envolving af:document and the GMaps4JSF in a JSP page. The problem was af:document generates "html", "head" and "body" tags in the HTML out. For map works is necessary a link to the google maps api be inside head tag. To do that I put the link to java script file inside facet "metaContainer" of af:document tag. This solved half of problem. Then I put a clientListener on af:document to tell ADF Faces RC invoke the method that renders the map on page. This method is rendered by GMaps4JSF, its name is "renderMap" + map's id.

    Above, the code:
    .
    .
    .
    af:document binding="#{backing_mapView.docPrincipal}" id="docPrincipal"
    af:clientListener method="renderMapmapPrincipal()" type="load"/
    f:facet name="metaContainer"
    f:verbatim
    script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAwsgGjEvs76gxnDhoglrVGhSThppOAcxPFkevCNH4bsq7R2F9TRTc-XST1nVOm2dAtpk-kY45EWj1iA"
    type="text/javascript"
    /script
    /f:verbatim
    /f:facet

    af:form binding="#{backing_mapView.frmPrincipal}" id="frmPrincipal"
    map:map binding="#{backing_mapView.mapPrincipal}" id="mapPrincipal" height="500px" width="500px" zoom="6"/
    /af:form
    /af:document
    .
    .
    .

    Regards,

    Josué Saraiva.

    ReplyDelete
  6. Great job,

    I made a call to the developer for this , He accepted this issue.

    I will test it and give a reply to him and update my blog.

    thanks a lot.

    ReplyDelete
  7. Hi Josue,

    I updated my example , it 's working fine with af:document

    but the next challange is what to do when I want to replace the input button and use af:commandbutton with a clientlistener to call the hide and show javascript function

    thanks Edwin

    ReplyDelete
  8. Goeie Dag Edwin,

    I am trying to build a sample application in JDeveloper 11g (latest build) using the GMAPS4JSF 1.2 jar and your code samples but I only get a blank frame with the two buttons on my web page.
    Is the more I need to do or can you possibly share the project?

    Please advise,
    Hennie Kloppers

    ReplyDelete
  9. Hoi,

    Did you use the metaContainer facet in af:document. and are using localhost or your pc plus domain name. You have register an api on a domain name use this ( use host file in system32\driver\

    and maybe I used a different version of gmaps4jsf.

    succes met je project

    groeten Edwin

    ReplyDelete
  10. I have the similar problem that Hennie.
    In Jdeveloper 11g 11.1.1.0.2 my code work fine.
    In Jdeveloper 11g 11.1.1.1.0 the same code don't work.
    I use the library jar gmaps4jsf-core-1.1.2.jar put in the WEB-INF/lib folder.

    My code is:

    ?xml version='1.0' encoding='windows-1252'?>
    jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
    xmlns:trh="http://myfaces.apache.org/trinidad/html"
    xmlns:yui="http://code.google.com/p/gmaps4jsf/">
    jsp:directive.page contentType="text/html;charset=windows-1252"/>
    f:view>
    af:document id="id_docroot" title="titulo Doc">
    af:form>
    af:decorativeBox id="id_DecorativeRoot">
    f:facet name="center">
    yui:map longitude=" -4.421386" latitude="36.717954" id="MapaRed"
    renderOnWindowLoad="false" zoom="14">
    yui:mapControl name="GLargeMapControl" id="id_GLargeMapControl"
    position="G_ANCHOR_TOP_LEFT"/>
    yui:mapControl name="GMapTypeControl" id="id_GMapTypeControl"
    position="G_ANCHOR_TOP_RIGHT"/>
    yui:marker id="marker1" latitude="36.717954"
    longitude="-4.421386"/>
    /yui:map>
    /f:facet>
    f:facet name="top">
    af:panelGroupLayout layout="vertical"
    xmlns:af="http://xmlns.oracle.com/adf/faces/rich" halign="center">
    af:outputLabel value="Pruebas de Gmaps4Jsf" id="id_DecorativeRoor"/>
    /af:panelGroupLayout>
    /f:facet>
    /af:decorativeBox>
    /af:form>
    f:facet name="metaContainer">
    af:group id="group1">
    trh:script source="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAfWaHRSVm60PthsQlilBjFBRi_j0U6kJrkFvY4-OX2XYmEAa76BQI1WTKk4FfNHLB_4TC2EnUuZOQpg"
    id="scriptKeyGoogle">/trh:script>
    trh:script text="
    function prueba(){
    alert('-------- prueba');
    }
    " id="script_varios">/trh:script>
    /af:group>
    /f:facet>
    /af:document>
    /f:view>

    .
    What is the problem ? The new version jdeveloper11g 11.1.1.1.0 ?

    Thanks
    Antonio Spá

    ReplyDelete
  11. Hi,

    I will investigate this in 11g R1.

    thanks.

    ReplyDelete
  12. Ok,

    I did some research and the problem is that the gmaps4jsf jsf map component is not generated in the pagesource in R1 , just take a look at the pagesource in both jdevelopers

    this is missing

    input id="com.googlecode.gmaps4jsf.mapStatemapPrincipal" name="com.googlecode.gmaps4jsf.mapStatemapPrincipal" type="hidden" script type="text/javascript"
    var renderingScript = " var office1; var office2; if (GBrowserIsCompatible()) {function renderMapmapPrincipal()

    Now we need to find out why the renderer does not work in R1

    thanks

    thanks

    ReplyDelete
  13. Hi guys, Im having an issue with Jdeveloper 11.1.2.0.0 i cant get My code to work it gets stuck at the loading screen and on refresh it doesnt show the map rather it only shows the two buttons. I have copy pasted it as is written on the blog. Any suggestions as to what may be causing this?

    ReplyDelete
  14. Hi,

    Are you using the new jdeveloper. I think somehow the ADF JSF javascript libs is conflicting with that of gmaps4jsf.

    but I will try it with the new jdev.

    thanks

    ReplyDelete
  15. hi guys.. Can you share the solution to the problem tag is missing on R1. (iam using jdev 11.1.1.3.0)

    this is missing :

    input id="com.googlecode.gmaps4jsf.mapStatemapPrincipal" name="com.googlecode.gmaps4jsf.mapStatemapPrincipal" type="hidden" script type="text/javascript"
    var renderingScript = " var office1; var office2; if (GBrowserIsCompatible()) {function renderMapmapPrincipal()

    I cant find the solution, please help.

    thanks chandra

    ReplyDelete
  16. Hi

    There is no solution available somehow weblogic /adf is conflicting with gmaps4jsf.

    thanks

    ReplyDelete
  17. Was there a solution to this issue? One of my project team members has been struggling with Gmaps in ADF for several weeks and looks more and more everyday like he wants to kill me for making him persevere with our 'find a branch' page!

    He initially tried just the regular javascript route but can't get the map to render on page load. I saw gmaps4jsf and thought it looked awesome and was going to be the silver bullet to all our problems - but again the map in this example will not render on load in ADF with JDeveloper version 11.1.1.6.0 (we just see the spinning Oracle logo initially, then on refresh just the buttons are rendered with no map).

    At this point I just want to know whether it's worth persevering with gmaps4jsf when we now have only 3 more weeks to go-live of our new site?

    ReplyDelete
    Replies
    1. Sorry, it doesn't work anymore, I don't know why

      Good luck

      Delete