dynamic google map , struts2 google map integration , google map , struts2 google map

The Google Maps Javascript API lets you embed Google Maps in your own web pages.All Maps API applications should load the Maps API using an API key. Using an API key enables you to monitor your application's Maps API usage. If your application's Maps API usage exceeds the Usage Limits, you must load the Maps API using an API key in order to purchase additional quota.

Here Is Link to get your map API :- Google Map API


(Sample Code) Here is my key:-



first create your web project here i am using (Struts2 environment you do it own your way) :-

web.xml

Map


struts2
org.apache.struts2.dispatcher.FilterDispatcher



struts2
/*
REQUEST
INCLUDE
FORWARD
ERROR



redirect.jsp

struts.xml

/Map.jsp

Action Class Which contain a list of location

package com.javastoreroom.action;

import java.util.ArrayList;
import java.util.List;
import com.opensymphony.xwork2.ActionSupport;

public class LocationAction extends ActionSupport {

	private static final long serialVersionUID = 1L;
	private List locationlist = new ArrayList();
	 
	 public String fetchLocationList() {
	 
	  locationlist.add(new com.javastoreroom.bean.Location(1,"palampur"));
	  locationlist.add(new com.javastoreroom.bean.Location(2, "Chandigrah"));
	  locationlist.add(new com.javastoreroom.bean.Location(3, "Bejing"));
	  locationlist.add(new com.javastoreroom.bean.Location(4, "Delhi"));
	  	 
	  return SUCCESS;
	 }

	public List getLocationlist() {
		return locationlist;
	}

	public void setLocationlist(List locationlist) {
		this.locationlist = locationlist;
	}
}

Bean

package com.javastoreroom.bean;

public class Location {

	private int id;
	private String locationName;

	public Location(int id, String locationName) {
		this.id = id;
		this.locationName = locationName;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getLocationName() {
		return locationName;
	}

	public void setLocationName(String locationName) {
		this.locationName = locationName;
	}
}

Jsp redirect.jsp

<% response.sendRedirect("fetchLocationList.html");%>

Map.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib  prefix="s" uri="/struts-tags" %>










 
 
  
" style="height: 100px;"/>
   ','');">
   " id="mapimage" style="border: 2px solid lightgray;height: 88px;width: 322px;font-size: 11px;color:darkgreen;cursor: pointer;margin-left: 50%;" src="http://maps.googleapis.com/maps/api/staticmap?center=&markers=color:red%7C/>&zoom=10&size=250x80&scale=2&maptype=roadmap&sensor=false"/>
   
" style="height: 20px;"/>
 

Map.js

function initialize(id,name)
{

var geocoder =  new google.maps.Geocoder();
geocoder.geocode( { 'address':name}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 var myCenter=new google.maps.LatLng( results[0].geometry.location.lat() , results[0].geometry.location.lng());
 var marker;
 var mapProp = {
 scrollwheel:true,		  
 center:myCenter,
 zoom:15,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map=new google.maps.Map(document.getElementById("googleMap"+id),mapProp);
 
 marker=new google.maps.Marker({
 position:myCenter,
 animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
	  overlayImage:place,
	  content:contentString
	  });
	    google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	  });
 }
});
}

After executing project output will shown (static map) like this:-



when you click on any map (scrollable map shown) like this :-



that should be done.