Display Google Map Using JSF

This page describes the process of creating a web application to display a google map using the Gmap4JSF tag library. All the Javascript code to display the map is generated by the JSF library.

Requirements

Maven – installed and configured

Generate a new project using maven
mvn archetype:generate -DarchetypeArtifactId=maven-archetype-webapp
groupId: com.test
artifactId: googleMapTest
choose defaults for the rest of the questions.

Generate the eclipse project
mvn eclipse:clean eclipse:eclipse

Import the project into eclipse

Modify the pom.xml file.
My pom.xml looks like this…

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.test</groupId>
  <artifactId>googleMapTest</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>googleMapTest Maven Webapp</name>
  <url>http://maven.apache.org</url>

    <repositories>
        <repository>
            <id>googlecode.com</id>
            <url>http://gmaps4jsf.googlecode.com/svn/trunk/gmaps4jsf-repo</url>
        </repository>
    </repositories>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
        <dependency>
            <groupId>com.googlecode.gmaps4jsf</groupId>
            <artifactId>gmaps4jsf-core</artifactId>
            <version>1.1.2</version>
        </dependency>

        <dependency>
            <groupId>org.apache.myfaces.core</groupId>
            <artifactId>myfaces-api</artifactId>
            <version>1.2.2</version>
        </dependency>

        <dependency>
            <groupId>org.apache.myfaces.core</groupId>
            <artifactId>myfaces-impl</artifactId>
            <version>1.2.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>
  </dependencies>
  <build>
    <finalName>googleMapTest</finalName>
        <plugins>
            <plugin>
                <groupId>org.mortbay.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
				<version>7.0.0.v20091005</version>
                        <configuration>
                         <scanIntervalSeconds>2</scanIntervalSeconds>
                        </configuration>
            </plugin>
        </plugins>
  </build>
</project>

Regenerate the eclipse project and refresh.
mvn eclipse:clean eclipse:eclipse

src/main/webapp/WEB-INF/web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>

  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

src/main/webapp/index.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Your Page Title</title>
<meta http-equiv="REFRESH" content="0;url=<c:url value='/faces/displayMap.jsp'/>"></HEAD>
<BODY>
Optional page text here.
</BODY>
</HTML>

src/main/webapp/displayMap.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://code.google.com/p/gmaps4jsf/" prefix="m"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to GMaps4JSF</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script
	src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAxrVS1QxlpJHXxQ2Vxg2bJBQdkFK-tWRbPPQS4ACM1pq_e-PltxQXeyH20wQuqDaQ_6EM5UeGGVpnIw"
	type="text/javascript"></script>

</head>
<body onunload="GUnload()">
<f:view>
	<h:form id="form">
		<m:map width="600px" height="600px" latitude="37.4"
			longitude="-122">
			<m:marker latitude="37.4" longitude="-122" draggable="true"/>
			<m:htmlInformationWindow latitude="37.4" longitude="-122"
				htmlText="<B>Hello World</B>" />
		</m:map>
	</h:form>
</f:view>
</body>
</html>

Test the project in Jetty

mvn clean compile jetty:run

navigate to http://localhost:8080/

You should see a map with a popup that says hello world. Read the Gmap4JSF website for more detailed instructions on how to use the tag.

Reference

http://code.google.com/p/gmaps4jsf/

About these ads

3 Responses to “Display Google Map Using JSF”

Feed for this Entry Trackback Address

1 Hazem Ahmed Saleh
February 2, 2010 at 7:05 pm

Thanks for this post. I added to the list of resources of GMaps4JSF:
http://code.google.com/p/gmaps4jsf/wiki/RelatedArticles

- 2 numberformat
  February 2, 2010 at 7:26 pm
  
  Thanks for your comment. What a coincidence… I picked up your book on MyFaces and Facelets and was reading it over last weekend . Great book by the way! (http://www.apress.com/book/view/9781590597378)
  
  - 3 Hazem Ahmed Saleh
    February 3, 2010 at 6:11 am
    
    Thanks!

S	M	T	W	T	F	S
« Jan				Mar »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28

Java/JEE