Platinum Partner
java,frameworks

Google Maps for JSF

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:
  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/

    {{ tag }}, {{tag}},

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}
    {{ parent.authors[0].realName || parent.author}}

    {{ parent.authors[0].tagline || parent.tagline }}

    {{ parent.views }} ViewsClicks
    Tweet

    {{parent.nComments}}