FaceletsSupport - gmaps4jsf - Project Hosting on Google Code

Updated Dec 28, 2008 by Hazem.saleh

FaceletsSupport

In GMaps4JSF 1.1.1, Facelets is automatically supported. No extra configurations are needed!

In GMaps4JSF 1.1.0, GMaps4JSF can work with Facelets with the following instructions:

Create an XML file (gmaps4jsf-facelets-taglib.xml), then copy the following content to it:

<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
  "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
  "facelet-taglib_1_0.dtd">

<facelet-taglib>
    <namespace>http://code.google.com/p/gmaps4jsf/</namespace>
    <tag>
		<tag-name>map</tag-name>
		<component>
			<component-type>com.googlecode.gmaps4jsf.Map</component-type>
		</component>
    </tag>
    <tag>
		<tag-name>marker</tag-name>
		<component>
			<component-type>com.googlecode.gmaps4jsf.Marker</component-type>
		</component>
    </tag>
    <tag>
		<tag-name>htmlInformationWindow</tag-name>
		<component>
			<component-type>com.googlecode.gmaps4jsf.HTMLInformationWindow</component-type>
		</component>
    </tag>
    <tag>
                <tag-name>eventListener</tag-name>
                <component>
                        <component-type>com.googlecode.gmaps4jsf.EventListener</component-type>
                </component>
    </tag>
    <tag>
                <tag-name>groundoverlay</tag-name>
                <component>
                        <component-type>com.googlecode.gmaps4jsf.Groundoverlay</component-type>
                </component>
    </tag>
    <tag>
                <tag-name>mapControl</tag-name>
                <component>
                        <component-type>com.googlecode.gmaps4jsf.MapControl</component-type>
                </component>
    </tag>
    <tag>
                <tag-name>point</tag-name>
                <component>
                        <component-type>com.googlecode.gmaps4jsf.Point</component-type>
                </component>
    </tag>
    <tag>
                <tag-name>polygon</tag-name>
                <component>
                        <component-type>com.googlecode.gmaps4jsf.Polygon</component-type>
                </component>
    </tag>
    <tag>
                <tag-name>polyline</tag-name>
                <component>
                        <component-type>com.googlecode.gmaps4jsf.Polyline</component-type>
                </component>
    </tag>
    <tag>
                <tag-name>icon</tag-name>
                <component>
                        <component-type>com.googlecode.gmaps4jsf.Icon</component-type>
                </component>
    </tag>
    <tag>
                <tag-name>streetViewPanorama</tag-name>
                <component>
                        <component-type>com.googlecode.gmaps4jsf.StreetViewPanorama</component-type>
                </component>
    </tag>
</facelet-taglib>

Copy the (gmaps4jsf-facelets-taglib.xml) file to the WEB-INF folder of your application.
In the (web.xml) file of your application, add the following context parameter:

    <context-param>
        <param-name>facelets.LIBRARIES</param-name>
        <param-value>/WEB-INF/gmaps4jsf-facelets-taglib.xml</param-value>
    </context-param>

Add the following declaration to your Facelets XHTML file, and try the map ;):

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:m="http://code.google.com/p/gmaps4jsf/">
...
      <m:map width="500px" height="500px" latitude="30.01" longitude="31.14">
    		<m:marker  latitude="30.01" longitude="31.14"/>
    		<m:htmlInformationWindow latitude="30.01" longitude="31.14" 
    			   htmlText="&lt;b&gt;This is Egypt&lt;b&gt;"/>
      </m:map>
...
</html>

Enjoy working with Facelets!!!.

Comment by condesales, Feb 05, 2009

very nice post! very helpfull

Comment by condesales, Feb 05, 2009

i'm done everything like u said but the map isn't loading.. what could be?

i'm doing this too:

<f:view contentType="text/html">
    <head>
    	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAtRLgopSfFn_inKV4Mb4dwRQrh986W3YN5ROngdOVRv-81htxfBSHsTcVUm4HRkCt9bSp5mP_3_snrw" 
      	type="text/javascript"></script>
	</head>
	</f:view>

Comment by condesales, Feb 06, 2009

i solved the problem adding

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

to the <head> tags at the template.xhtml file.

i'm using Jboss seam ;)

Comment by tobias.manger, Jun 27, 2009

Hi, I am trying to configure gmaps4jsf with seam.

I downloaded gmaps4jsf-core-1.1.2-SNAPSHOT-20-June-2009.jar renamed it to gmaps4jsf.jar and copied it into my lib folder and added it to my buildpath.

I copied the script string from condesales comment into the template.xhtml generated a google maps api key for http://localhost/ and replaced it.

is there anything else I am missing?

This is the xhtml file where I want to display the map:

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:s="http://jboss.com/products/seam/taglib" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:rich="http://richfaces.org/rich" xmlns:m="http://code.google.com/p/gmaps4jsf/" template="layout/template.xhtml">

<ui:define name="body">
<m:map width="500px" height="500px" latitude="30.01" longitude="31.14">
<m:marker latitude="30.01" longitude="31.14" /> <m:htmlInformationWindow latitude="30.01" longitude="31.14"
htmlText="<b>This is Egypt<b>" />
</m:map>
</ui:define>

</ui:composition>

Comment by tobias.manger, Jun 29, 2009

Hi, Of course I should have mentioned my problem.

I did everything as mentioned above. I don't get any error messages, but the map is not displayed on the page.

I also dont have any writing support. so if I write: <m: I dont get any suggestions.

Any ideas what I miss?

Comment by tobias.manger, Jul 08, 2009

That is because, I am using a template and did not post the template.xhtml

The template contains the script.