RSS

Tag Archives: Google Maps

IP Locator

Recently I started learning Flex and AIR and was amazed to know about their features and ease of programming. To start with I decided to develop a widget which can be independently used in any web page. After much effort I made it but it was sad to now that flex applications need a policy file at the data server to communicate. As the data was coming from some third party I was not possible to place the policy file there. To make use of the efforts I decided this application to port to AIR platform. Though it was an easy task but there were some problems in integrating Google Maps in it. Thanks to Google Map API for AIR because of that it was done easily.

Screenshot of the Application

This IP Locator which is developed using Flex Builder needs Adobe Integrated Runtime to run. You can enter the IP in the input box and Hit Go. It connects to the internet to fetch the details of the IP given. It fetches the details in XML format. After parsing the XML response the view is updated.
Google Maps are located using longitude and latitude fetched. You should also be aware that it is not a commercial application and so there is no guarantee of the accuracy of data because the information is coming from some third server which is not maintained by us.

 
2 Comments

Posted by on May 21, 2010 in AIR

 

Tags: , , ,

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:
    
    <%@ 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.
  •  
    7 Comments

    Posted by on April 21, 2010 in Java, JSF

     

    Tags: ,