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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@page import ="com.great.util.IConstants"%>
<%@page import = "java.util.List" %>
<%@page import = "java.util.*" %>
<%@page import = "java.util.ArrayList" %>
<script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAcl" type="text/javascript"></script>
<script type="text/javascript">
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">
<div id="map" style="width: 500px; height: 200px"></div>
</body>
</html>
-By Boobalan
I hope it will use full for your google map application.