Saturday, 29 June 2013

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" %>




Dynamic Map...





 
 
  

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.