Place multiple pinpoint in google map using jsp with javascript

Post date: Jul 19, 2011 3:05:09 PM

One of my assignment required to put a pinpoint in the google map in order to identify the route of my device.
For that i get all the latitude and longitude information based on the my device id from my database and stored into the session variable.
I create a home.jsp inside the home.jsp i place my google.jsp using following code

<jsp:include page ="GoogleMap.jsp" flush="true"/>

Now my home page show google map.

Another requirement is that from the home page user click the device id, based on that device id i need to locate the device route in google map.

So i used following javascript to does that operation for me in GoogleMap.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">

<%@page import="com.great.pojo.RouteDetails"%><html>

<head>

<%@page import ="com.great.util.IConstants"%>

<%@page import = "java.util.List" %>

<%@page import = "java.util.*" %>

<%@page import = "java.util.ArrayList" %>

key=ABQIAAAAcl" type="text/javascript"></script>

var map = null;

var geocoder = null;

//for map

var map;

function PointLocation(Latitude,Longtitude,color, address) {

var point = new GLatLng(Latitude,Longtitude);

var marker = new GMarker(point);

map.setCenter(point,17);

map.addOverlay(marker);

map.setMapType(G_HYBRID_MAP);

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

marker.openInfoWindowTabsHtml(

[new GInfoWindowTab("Maharastra",address),

new GInfoWindowTab("More Details",'<b>Vechile Details<br/>Maximize button on this window with + sign</b>')],

{maxUrl:"https://sites.google.com/site/greateindiaclub"});

});

}

function load(loc) {

if (GBrowserIsCompatible()){

var point;

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

map.addControl(new GOverviewMapControl());

map.enableDoubleClickZoom();

map.enableScrollWheelZoom();

map.addControl(new GMapTypeControl());

map.addControl(new GSmallMapControl());

//var address='Google Sites';

<%

List<RouteDetails> listRoute = new ArrayList<RouteDetails>();

//I can add n number of points here

(this information i will get from my database.

listRoute.add(new RouteDetails("1","19.091533","72.865983","today") );

listRoute.add(new

RouteDetails("1","18.9861","72.8372","today") );

Iterator<RouteDetails> itrRouter = listRoute.iterator();

while(itrRouter.hasNext())

{

RouteDetails routeDetails = itrRouter.next();

%>

var latitude =<%=routeDetails.getLatitude()%>

var longitude =<%=routeDetails.getLongitude()%>

//Call the location to point

PointLocation (latitude,longitude,"Green","Mumbai");

<%}

%>

}

</script>

<title>Goolgle Map </title>

</head>

<body onload="load();" onunload="GUnload()" style="

background-color:Transparent">

</body>

</html>

-By Boobalan

I hope it will use full for your google map application.