RSS

Google Maps for JSF

21 Apr

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:
    
    <%@ 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&amp;v=2&amp;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.

sampleJspPage.jsp

<%@ 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&amp;v=2&amp;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.
  • About these ads
     
    7 Comments

    Posted by on April 21, 2010 in Java, JSF

     

    Tags: ,

    7 responses to “Google Maps for JSF

    1. Hazem Ahmed Saleh

      April 21, 2010 at 8:28 pm

      Very nice post about GMaps4JSF. I will add to the project wiki.
      Thanks Himanshu!

       
      • himanshugpt

        April 21, 2010 at 9:04 pm

        Thanks for adding this to the Wiki.

         
    2. Bharath Kuppuswamy

      April 23, 2010 at 8:53 pm

      Nice one .. will give it a try.

       
    3. Geetha

      September 9, 2010 at 8:24 am

      Hi,
      I have an issue with gmap4jsf navigation control. I have added

      The look and feel of the navigation control added by gmap4jsf is different compared to the default google map navigation control. Google Map has a circular zoom/pan control where as the control added by gmap4jsf is square. How do I get a Google Map like look and feel?

       
    4. Hamid

      February 14, 2011 at 12:42 pm

      I have developed a simple application for google maps using gmas4jsf but when I run the application the browser show the output with error message “404 , the request source not found” , So please help me in this matter

      regards
      Hamid

       
      • himanshugpt

        February 16, 2011 at 6:58 pm

        Are you not able to see the page itself or you are not able to see the map?

         
    5. Pradeep Kumar Choudhary

      August 22, 2012 at 1:02 pm

      Hi i want to get only address for text field through google api..pls help me how.

      i m posting the normal html file that is working..i want same thing for the JSF2.0

      var autocomplete = new google.maps.places.Autocomplete($(“#address”)[0], {});

      google.maps.event.addListener(autocomplete, ‘place_changed’, function() {
      var place = autocomplete.getPlace();
      //console.log(place.address_components);
      });

       

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

     
    Follow

    Get every new post delivered to your Inbox.

    %d bloggers like this: