web butcher

Sharing my knowledge to persuade you to share yours

./building-a-portlet-with-google-maps-on-websphere-portal

Building a portlet with Google Maps on Websphere Portal

There’s a link on the right to download the project files so you can import it to your RAD and run. Import as a Project Interchange file. If your RAD is greater than 7.0 do the migration. Also if you prefer follow the steps below and understand how I did.

The Google Maps API license is free, the only important rule is: Everything you develop using Google Maps API have to be for public use in the web. They have also a limit of showings per day, it’s a big number, something like 200,000. You have to read the terms if you want to know more. Google has an excellent documentation about that. It’s under http://code.google.com/apis/maps/documentation/.

For using Google Maps API you also have to get an API Key here: http://code.google.com/apis/maps/signup.html. The key is nothing more than a hash code of your server’s address, so you have to create a key for each site you use that.

Using Google Maps under Websphere Portal is nothing so different from using anywhere else. First of all, lets create a Portlet Project.



Create now a simple Web Diagram with an initial action and a jsp page. We will use the initial action to simulate something like reading point coordinates from database. This is our Web Diagram:



The file index.jsp will tell struts to go to initial action through the welcome forward. For this, just put the following in the end of the file:

<logic:forward name="welcome"/>

I’ve created a Point Bean Obejct. So, lets create an ArrayList of some of these points and store it in the session. For that, in the initial action try block, put this:

// Read points from database here.
ArrayList points = new ArrayList();
points.add(new Point("-11.95908", "-51.855469"));
points.add(new Point("-23.816841","-45.365124"));
points.add(new Point("-27.586999","-48.423014"));
// Store them on session
request.getPortletSession().setAttribute("points", points);

Create a bean for the points. You can use this point object to store any data from the point such as a html code with the description that will be showed when the user click the point.

package googlemapshelloworld.beans;
 
public class Point {
	private String latitude;
	private String longitude;
 
	public Point(String latitude, String longitude){
		this.latitude = latitude;
		this.longitude = longitude;
	}
 
	public String getLatitude() {
		return latitude;
	}
 
	public void setLatitude(String latitude) {
		this.latitude = latitude;
	}
 
	public String getLongitude() {
		return longitude;
	}
 
	public void setLongitude(String longitude) {
		this.longitude = longitude;
	}
 
}

The first time I used Maps in Portal I had a strange issue. In ie I got a gray screen over my map and I couldn“t see the entire map:



After doing some research I found that`s because ie has an issue about png transparency, something that Google Maps API makes use of. After navigating for a while, I found this: http://jquery.andreaseberhard.de/pngFix/

Download the pngFix.zip file and include the files on a js folder within your WebContent folder. Also load these files in your map.jsp file.

Project Explorer

<script type="text/javascript" src="<%= request.getContextPath() %>/js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="<%= request.getContextPath() %>/js/jquery.pngFix.js"></script>
 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script>

Also include the js for Maps API and create a div tag with the size you want with the id=”map”.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=[YOUR KEY HERE]" type="text/javascript"></script>
 
<script type="text/javascript">
setTimeout("loadMap()",1000);
 
var map;
function loadMap(){
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(-11.959, -51.8554), 4);
		map.setUIToDefault();
		loadPoints();
	}
}
 
//Function loadPoints goes here.
 
</script>
 
<div id="map" style="height:500px; width:500px"></div>

Let`s create a method to plot the points in the map. It sort of print javascript code with jsp:

function loadPoints(){ <%
	out.print("\nvar point;\nvar marker;");
	ArrayList points = (ArrayList) session.getAttribute("points");
	for (int i=0; i<points.size(); i++){
		out.println("		point = new GLatLng(" + ((Point)points.get(i)).getLatitude() + ", " + ((Point)points.get(i)).getLongitude() + ");");
		out.println("		marker = createMarker(point, 'We are here!');");
		out.println("		map.addOverlay(marker);");
	} %>
}
 
function createMarker(point, html){
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() { 
		marker.openInfoWindowHtml(html);
	});
	return marker;
}

Done.

Tags: ,


This entry was posted on Wednesday, April 1st, 2009 at 9:39 am and is filed under articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “Building a portlet with Google Maps on Websphere Portal”

  1. KrisBelucci says:

    Great post! Just wanted to let you know you have a new subscriber- me!

  2. Kelly Brown says:

    Hi, very nice post. I have been wonder’n bout this issue,so thanks for posting

  3. Hi, gr8 post thanks for posting. Information is useful!

  4. GarykPatton says:

    Hi. I like the way you write. Will you post some more articles?

  5. butch says:

    Hey… Thanks!

    Probably I will… as far as I have something interesting and useful… may it will take some time, but I will! ;)

    bye

  6. jacomac says:

    I’ve deployed your app on WPS 6.1.0.3. I am getting this error: Exception forwarding for name welcome: javax.servlet.ServletException: com.ibm.ws.portletcontainer.core.rd.impl.IncludedServletRequestImpl incompatible with javax.portlet.RenderRequest

  7. felipe says:

    Hi jacomac. Have you googled before posting here? i just googled the error message and the first result gave me this:

    http://www.ibm.com/developerworks/forums/message.jspa?messageID=14178256

    that point’s to this:

    http://www.ibm.com/developerworks/forums/thread.jspa?threadID=226355

    that has the solution.

    thanks

  8. hWinetst says:

    Hello…

    My life,vist it http://yaplog.jp/promdresses/ ,Thanks….

  9. Dehmers says:

    Hello…

    My life,vist it http://rawsonl.onsugar.com/ ,Thanks….

Leave a Reply