Himanshu Gupta is currently working as a Software Engineer in India. He has been working in Java for the last 3 years. He has a BE degree from Rajasthan University. He holds SCJP-5 and SCWCD-5 Sun certifications. Himanshu has posted 5 posts at DZone. View Full User Profile

Google Maps for JSF

04.22.2010
| 9913 views |
  • submit to reddit

Gone are the days when you have to open an atlas for looking some location. Thanks to GOOGLE MAPS which shows you whatever you want and that too within minutes. You can’t only see the location but also get its real time traffic details with lots of other information. Is not it cool to show your location in google map on your website or blog so that everyone can know where you are living or working?

GMaps4JSF is the extensive library provided by the google to integrate Google maps in JSF enabled pages. GMaps4JSF aims at integrating Google maps with JSF. JSF users will be also able to construct complex Streetview Panoramas and Maps with just few lines of code (JSF tags). It allows you to mark polygons, lines, HTML informatin window to your Map. GMaps4JSF is one of the JSF Mashups libraries that enables JSF users to build web 2.0 mashup applications in JSF easily.

Configuring GMap4JSF

You really don’t have to do much to use Google Maps with your JSF framework. You only need to follow these given steps:

  1. Download the gmaps4jsf-core-1.1.jar from http://code.google.com/p/gmaps4jsf/downloads/list and put it in your project’s lib folder.
  2. Include the tag library in your JSF page as follows: view sourceprint?
    1<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  3. Add the following script tags in your jsp HEAD tags.

    < script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAxrVS1QxlpJHXxQ2Vxg2bJBQdkFK
    -tWRbPPQS4ACM1pq_e-PltxQXeyH20wQuqDaQ_6EM5UeGGVpnIw" type="text/javascript">
    < /script >

    The key which is used in JavaScript can be generated by signing up at http://code.google.com/apis/maps/signup.html

     

Embedding Google Map in JSF page.

After doing the above mentioned tasks you are all ready to insert map in your jsf page. This is the basic structure of a jsf page which is ready to incorporate Google map in it.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@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 HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAxrVS1QxlpJHXxQ2Vxg2bJBQdkFK- tWRbPPQS4ACM1pq_e-PltxQXeyH20wQuqDaQ_6EM5UeGGVpnIw"
type="text/javascript"></script>
<title>Insert title here</title>
</head>
<body>
<f:view>
<h:form id="form">
<m:map zoom="16" width="500px" height="500px" address="White house">
<m:mapControl name="GLargeMapControl" position="G_ANCHOR_BOTTOM_LEFT" />
<m:mapControl name="GMapTypeControl" />
<m:htmlInformationWindow htmlText="White house"></m:htmlInformationWindow>
</m:map>
</h:form>
</f:view>
</body>
</html>

 Explanation

<%@ taglib uri="http://code.google.com/p/gmaps4jsf/" prefix="m" %>

As described before the include directive tag imports the usable taglib and uses m as its prefix

<m:map zoom="16" width="500px" height="500px" address="White house" >
<m:mapControl name="GLargeMapControl" position="G_ANCHOR_BOTTOM_LEFT"/>
<m:mapControl name="GMapTypeControl"/>
<m:htmlInformationWindow htmlText="White house"></m:htmlInformationWindow>
</m:map>

 

  • <m:map> is for map component. It allows us to create a map. It has various attributes which can be used to customize it. None of them are compulsory. So you are free to use them or not according to ypur needs.
  •  

     

    • zoom: Its default value is 11. You can change its value as per your requirements.

    • width and height: They represent the height and width of the map. The default values are 500 for both.

    • address: The address you wish the map to point to. If you use this attribute then don't use longitude or latitude attributes.

  • <m:mapControl> This component allows us to add a map control to the map component. Like if you want to add a control so that the user can zoom in or zoom out the map, or a control to switch between the types of the map.


  • htmlInformationWindowComponent: This component allows us to add an information window to the map component. Following we have provided the description about their attributes.

  • From http://himanshugpt.wordpress.com/2010/04/21/google-maps-for-jsf/

    Published at DZone with permission of its author, Himanshu Gupta.

    (Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

    Tags:

    Comments

    Hazem Saleh replied on Mon, 2010/04/26 - 2:06am

    Very good post about GMaps4JSF.

    Thanks Himanshu.

    Omos Aziegbe replied on Sun, 2010/05/23 - 9:55pm

    Thanks for this post. Its great. Tried it on Visual Web JSF and it works great...nice post...

    Cesar Hdez. replied on Tue, 2010/08/10 - 7:59am

    Hi, Thanks for your post, I could add them map, but now I want it in my project with Visual Web JSF, can you help me please? This is my "JSP" code generated with VW JSF.. please Check the the map lines.
    http://148.208.209.28:8080/ConHotel/resources/agregaUbicacion.jsp.source
    The problem is there isn't a map in the page...
    I thank any suggestion to show the map. César-Inn

    Cesar Hdez. replied on Tue, 2010/08/10 - 8:01am

    Or exist a method "redener" or something, ...either in visual web that code, donesn't show any. Thanks

    Comment viewing options

    Select your preferred way to display the comments and click "Save settings" to activate your changes.