GoogleMap struts portlet Introduction This article is demonstrating how to develop a struts portlet which enables the user to deal with an interactive Google map. It shows how to develop such a portlet with a configurable center latitude and longitude for the map, as well as how to configure and highlight some specific area on that map. It will go through displaying markers on some locations on the map, as well as displaying location description by clicking on the location marker. Also it will demonstrate the ability of selecting a location on the map using mouse click to store its latitude and longitude for example. For the development, Rational Software Architect 8, and WebSphere Portal Server 7 will be used. Create struts portlet Select File->New->Project, to open the new project window, and then select the Portlet Project. Then fill in the required information, and Modify the Portlet Project Configuration to add the struts capability to the created portlet.
Modify portlet.xml to specify the name of the jsp which will be used as an index for that portlet and create that jsp in the specified location.
Now we will work on the jsp we just created. First we need to load Google Map JavaScript API using the script element, then define the div element where the map will be located and define a javascript function which will be responsible for getting ActiveXObject for handling the Ajax calls. Those Ajax calls will be fired to a servlet which we will implement in the following sections, this servlet will receive some parameter in the Ajax call to specify which information should be returned to the portlet. A variable called portalurl is defined to represent the url of the servlet that will be called for handling the portlet Ajax calls. After getting the ActiveXObject, we need to call a business method in the servlet to retrieve a configurable latitude and longitude as a center of our map. In the following screen, we have a defined javascript method, which is responsible for calling the servlet passing the value of loadmapcenter, then parse the servlet response to display the map based on those center values.
For displaying the map on the defined div element the following line is used as shown in the previous screen new google.maps.map(document.getelementbyid('endusermap'), the displayed map will be shown based on the values returned from the servlet as per the line center: new google.maps.latlng(mapcenterlat, mapcenterlong), Those configurable center values is defined in a properties file called map.properties which is created under the same path of the jsp file as follow Create locations servlet For creating the servlet which will be handling the Ajax calls for the map portlet, a servlet mapping element will be added to the web.xml as follow
Then create the servlet class in the appropriate package as described above. This servlet will be responsible for reading the map center value from the properties file once the servlet loaded then provide this value as a response for the portlet Ajax call. In the doget method if the passed request parameter named as task was loadmapcenter, this servlet will return the center value to the portlet.
Now by running the portlet on the specified portal server, the portlet will be displaying Google map based on the specified center values. Highlight map area This section demonstrates how we can highlight specific area on the displayed map by drawing surrounding colored boundaries around it based on configurable area corners. First we need to add a configured property to the map.properties file to be as follow map.highlight.corners=25.3180060835625:55.31851589770277,25.29895038167786:55.346953601516 11,25.30072055435274:55.36101702115799,25.29774955256861:55.36415035665202,25.2968894342
5544:55.37202120733783,25.29787304148666:55.3774223079119,25.30235555995351:55.386220566 08995,25.28853832016628:55.42317829848398,25.28420644785069:55.43567158698368,25.2612735 8164161:55.50679521680161,25.2142847574944:55.65295753000131,25.05281825398465:55.662747 73723629,24.98476437881495:55.65841337620245,24.79194647064525:55.72816913745462,24.8001 8559168757:55.75950843478921,24.79681584773907:55.79175054639906,24.80337836835438:55.81 292883857098,24.90822151246244:55.81268262523287,24.96276258626675:55.85142643556544,2 4. 96244465378533:55.91192228660694,25.00273333686337:55.96230917691772,24.99837021391055:5 5.97637328610953,25.02664129603636:55.97538689169416,25.08682074901607:55.99487630954967,25.15967260891579:56.00025124122061,25.19566398488102:55.98184810369475,25.229616630029 29:55.99989848864801,25.2610751926947:56.00041526716172,25.29083245165092:55.99232574750 126,25.30164202414867:55.98056573266942,25.31851511158919:55.97115338483059,25.323212940 28822:55.9641147162048,25.33035975806866:55.96332653673393,25.33520735758684:55.96394374 157794,25.33937706592711:55.9664953170155,25.3428438094561:55.99405527804776,25.39128580 470798:56.0083087511662,25.39803840476573:55.99229064142796,25.38543000333782:55.9539373 0318052,25.35747237103658:55.9122283560982,25.32663706072589:55.9154251863425,25.3240721 0637317:55.79033718353404,25.34636471273409:55.81047501312711,25.36589699515692:55.79085 233418587,25.3746750254513:55.80031179830954,25.43456145338217:55.62189276720816,25.5170 1805466141:55.51335067402752,25.52111881597575:55.50578655849885,25.46256823756086:55.45 180395172274,25.44413386011625:55.4821161939244,25.44062416597172:55.4869731237719,25.44 552220616333:55.52058445163284,25.44532834999002:55.53571151451184,25.42573950446186:55. 59262860548237,25.4209878740634:55.61907699081664,25.4146397626698:55.62858823648276,25. 40854400904438:55.63172411799077,25.3678530889484:55.5976150657375,25.36800233290496:55. 58900817120354,25.36452274808428:55.53919120025291,25.35725539046794:55.49887560719342,2 5.37328199188505:55.46622694630709,25. 39330198277458:55.42749950296805,25.41516827000902 :55.41077976980809,25.3180060835625:55.31851589770277
Then we should update the servlet to read the corners same way as the center value. Then update the doget method to return the corners values in case of passed parameter value as loadhighlightcorners After that we should add the Ajax call to call the servlet for retrieving the corners, then parse the servlet response to display a colored surrounding boundary around the required area based on those corners.
As we can see from the previous screens, coordsnorthwest.push is used to construct an array of the parsed corners returned from the servlet, and then define a new google.maps.polygon based on this array as paths: coordsnorthwest, and define the color of this surrounding area by strokecolor: "#FF0000", then display that area on the map using regionnorthwest.setmap(endusermap);
Then we can call that javascript method after the line used to create the map itself as follow By running the portlet now, we should see a colored surrounding area drawn on the map. Display locations markers on map Google map API gives the ability to display some markers on some map locations, and also the ability to display location description by clicking the location.
We need to update the servlet to add the capability of returning some locations when passing parameter value as loadloc, and implement some method that will be returning an xml structured string for the needed locations as follow
Then in the jsp we can define some method to be called as an event handler for some button Then we need to define the javascript method which will be used to display the returned locations.
In the displaymapmarkers, 4 arrays will be constructed for storing each location piece of information (latitude, longitude, location name, location description), and fill those arrays based on the parsed values of the retuned servlet response. Then we need to construct a marker element for each location using newmarker = new google.maps.marker, and finally add a click event handler for each location to display an info window for that location.
google.maps.event.addlistener(newmarker, 'click', function() { openinfowindow(currentmarker, desc); }); Now by running the portlet, then by click the button that we added to the jsp, we can see the location loaded and displayed on the map, and when click any one of those locations we can see an info window for that location containing the location description. Select location on map Now we need to add the ability of selecting some location on the map using mouse click to populate that location longitude and latitude on some text fields to be stored after that for example.
Then for adding the click event handler to the map we just add a listener to the map specifying the handler method as follow Now by running the portlet and click on any location on the map, we can see that the curser shape changed to be +, and the new text fields had been populated with the longitude and latitude of that location Map Localization Finally what if we need our map to be displayed with another language based on the user local? That can be accomplished by just loading the API localized script based on the user local as follow
Now if I changed my browser local to a non English local, I can see the Arabic version of the map as follow One last note, all the previous jsp changes through this article required some taglibs to be referenced in the jsp as follow References https://developers.google.com/maps/documentation/javascript/