google map with struts2 framework (j2ee): Dynamic Google Map with Struts2 Framework

Hello,

I am writing this blog using NetBean6.0 IDE with struts2 framework of JAVA. So, it will more easy for those web programmer who has knowledge of struts2 framework. Here I send a location district name, Country name to class file to get Latitude and Longtitude value from Google Web service. Then, in another jsp page I got those latitude and longtitude value through JavaScript Code and send to Google Server.

Library/Jar files to configure struts2 framework:

**** commons-logging-1.1.1.jar

**** commons-logging-adapters-1.1.1.jar

**** commons-logging-api-1.1.1.jar

**** commons-logging.jar

**** ezmorph-1.0.4.jar

**** freemarker-2.3.8.jar

**** jasper-jdt.jar

**** ognl-2.6.11.jar

**** struts2-core-2.0.11.jar

**** xwork-2.0.4.jar

Library/Jar files for google map:

**** bp-ui-14.jar

**** shale-remoting.jar

Step 1: Create a jsp file( name suppose-index.jsp)

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!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=UTF-8">
<title>JSP Page</title>
</head>

<body style="padding:10px 200px 10px 200px">
<h1>Hello World!</h1>
<div>

<form action="getGoogleMap.action">
<input type="text" name="location"><br>
<input type="submit" value="Show Map">
</form>
</div>

</body>
</html>

Step 2: Create a jsp file to send location (Suppose ShowGoogleMap.jsp)

<%@ taglib prefix="s" uri="/struts-tags" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

key=GOOGLE API KEY" type="text/javascript"></script>

var map;

var icon0;

var newpoints = new Array();

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function'){

window.onload = func

} else {

window.onload = function() {

oldonload();

func();

}

addLoadEvent(loadMap);

addLoadEvent(addPoints);

function loadMap() {

var latVal = document.getElementById("a").value;

var langVal = document.getElementById("b").value;

var zoomLebel = 11;

map = new GMap2(document.getElementById("map"));

map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng( latVal, langVal), zoomLebel);

map.setMapType(G_NORMAL_MAP);

icon0 = new GIcon();

icon0.image = "http://www.google.com/mapfiles/marker.png";

icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";

icon0.iconSize = new GSize(20, 34);

icon0.shadowSize = new GSize(37, 34);

icon0.iconAnchor = new GPoint(9, 34);

icon0.infoWindowAnchor = new GPoint(9, 2);

icon0.infoShadowAnchor = new GPoint(18, 25);

}

function addPoints() {

var latVal = document.getElementById("a").value;

var langVal = document.getElementById("b").value;

var propertyLocation = document.getElementById("propertyLocation").value;

newpoints[0] = new Array(23.709801, 90.407112, icon0, 'yourLocation', '<div align="center">The Capital of Bangladesh</div>');

newpoints[1] = new Array(latVal, langVal, icon0, 'yourLocation', '<div align="center">Property Location::<br>'+propertyLocation+'</div>');

for(var i = 0; i < newpoints.length; i++) {

var point = new GPoint(newpoints[i][1],newpoints[i][0]);

var popuphtml = newpoints[i][4] ;

var marker = createMarker(point,newpoints[i][2],popuphtml);

map.addOverlay(marker);

}

function createMarker(point, icon, popuphtml) {

var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";

var marker = new GMarker(point, icon);

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(popuphtml);

});
return marker;

}
//]]>

</script>

div#popup {
background:#EFEFEF; border:1px solid #999999; margin:0px; padding:7px; width:270px;

}

</style>

</head>

<body>

<s:form>

<s:hidden id="a" name="a" value="%{latValue}"/>

<s:hidden id="b" name="b" value="%{longValue}"/>

<s:hidden id="propertyLocation" name="propertyLocation" value="%{location}"/>

</s:form>

</body>

</html>

N:B: Google api key can achieved from google web site using gmail account name & password.

One can get api by click on the address: (http://code.google.com/apis/maps/signup.html)

Step 3: Create a java file to get Latitude and Longtitude value as well as return value for struts.xml file (Suppose ShowMapAction.java)

package com.shahalom.Action;

import com.opensymphony.xwork2.Action;
import com.sun.j2ee.blueprints.ui.geocoder.GeoCoder;
import com.sun.j2ee.blueprints.ui.geocoder.GeoPoint;
import com.sun.j2ee.blueprints.ui.mapviewer.MapMarker;
import com.sun.j2ee.blueprints.ui.mapviewer.MapPoint;

/**
*
* @author Shah Alom
*/

public class ShowMapAction {

private MapMarker mapMarker=new MapMarker();
private MapPoint mapPoint=new MapPoint();
private String location="Dhaka, Bangladesh";
private Double latValue;
private Double longValue;

public String getGoogleMap(){
getLatLangtitudeValueFromGoogleService();
return Action.SUCCESS;

}

public void getLatLangtitudeValueFromGoogleService(){
GeoCoder geoCoder=new GeoCoder();
GeoPoint points[]=geoCoder.geoCode(getLocation());
mapMarker.setLatitude(points[0].getLatitude());
mapMarker.setLongitude(points[0].getLongitude());
mapMarker.setMarkup(points[0].toString());
mapPoint.setLatitude(points[0].getLatitude());
mapPoint.setLongitude(points[0].getLongitude());

this.setLatValue(mapMarker.getLatitude());
this.setLongValue(mapMarker.getLongitude());
System.out.println("Location is ::"+getLocation() );
System.out.println("getLatitude ::" +mapMarker.getLatitude());
System.out.println("getLongitude ::" +mapMarker.getLongitude());

}

public String getLocation() {

return location;

}

public void setLocation(String location) {

this.location = location;

}

public Double getLatValue() {

return latValue;

}

public void setLatValue(Double latValue) {

this.latValue = latValue;

}

public Double getLongValue() {

return longValue;

}

public void setLongValue(Double longValue) {

this.longValue = longValue;

}

}

Step 4: Create a struts.xml in the default package file

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="EndUserBeforLogin" extends="struts-default" >

<action name="getGoogleMap" method="getGoogleMap" class="com.shahalom.Action.ShowMapAction">
<result name="success">ShowMap.jsp</result>

</action>

</package>
</struts>

Step 5: Configure web.xml to detect struts.xml by the project (Whole code)

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>

<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

<session-config>
<session-timeout>
30
</session-timeout>
</session-config>

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

google map with struts2 framework (j2ee)

বুধবার, ৯ ডিসেম্বর, ২০০৯

Dynamic Google Map with Struts2 Framework

1 টি মন্তব্য: