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.
<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&v=2&sensor=true_or_false&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.
