Example 9 - Processing Events with Beans

This example uses a <googlemaps:map> tag with a click event added. The click event is set to reload the current page anytime a click is heard. What we've done is added a JavaBean to the page to handle the request. The bean's job is to add a <googlemaps:marker> tag to the map, and to have the <googlemaps:marker> display an infowindow showing the longitude and latitude clicked. Once a marker is added the user can double click it to get it to go away.

Notice that we've set the scope of the map to site. This allows us to reuse the current map so the history of added markers remains intact. If we had not set the scope to site, the map would be reloaded on each page load and only the currently added marker would display.

In a real world application you would integrate JSTL to load existing markers from a database, plus your bean would provide code to add and remove markers from the database...

Here's the code we used:

First the <googlemaps:map> tag with the event tag added:

<googlemaps:map id="Test" width="250" height="300" version="2" type="STREET" 
		scope="site">
  	<googlemaps:key domain="localhost" key="xxxx"/>
  	<googlemaps:point id="point1" address="74 Connors Lane" city="Elkton" 
  			state="MD" zipcode="21921" country="US"/>
	<googlemaps:event action="click" url="/GoogleMaps/example_9.jsp"/>
	<googlemaps:message>
		<img src="/GoogleMaps/images/loading.gif"/> Please wait...
	</googlemaps:message>
</googlemaps:map>
  

Next is the <jsp:useBean> tag that loads the bean and sets the properties received from the request. To ensure that the map was loaded at least once, and to ensure that the output from the tags included any newly added marker, the <jsp:useBean> tag has to appear after the <googlemaps:map> tag and before the <googlemaps:javascript> tag:

  <jsp:useBean id="processor" class="com.lamatek.beans.LeaveAMarkBean">
	<jsp:setProperty name="processor" property="pageContext" 
			value="<%=pageContext%>"/>
  </jsp:useBean> 
  

And last is the actual code for the bean. Here you'll notice that we're accessing the base classes:

package com.lamatek.beans;

import java.util.Date;

import com.lamatek.beans.google.DefaultEventListenerBean;
import com.lamatek.tags.google.GoogleMapEventTag;
import com.lamatek.tags.google.GoogleMapInfoWindowTag;
import com.lamatek.tags.google.GoogleMapMarkerTag;
import com.lamatek.tags.google.GoogleMapPointTag;
import com.lamatek.tags.google.GoogleMapTag;


public class LeaveAMarkBean extends DefaultEventListenerBean {

    public void processClickEvent(GoogleMapTag map, double longitude, double latitude) {
        super.processClickEvent(map, longitude, latitude);
        String name = "marker" + (new Date()).getTime();
        String pointName = "point" + (new Date()).getTime();
        GoogleMapPointTag point = new GoogleMapPointTag();
        point.setId(pointName);
        point.setLatitude(latitude);
        point.setLongitude(longitude);
        map.addPoint(point);
        GoogleMapMarkerTag marker = new GoogleMapMarkerTag();
        marker.setPoint(pointName);
        marker.setId(name);
        GoogleMapInfoWindowTag info = new GoogleMapInfoWindowTag();
        info.setDisplay(true);
        info.setHtml(true);
        info.setContent("<form action=\"\" method=\"POST\"><table><tr>
        	<td>Title: </td><td><input type=\"text\" name=\"title\"/>
        	</td></tr><tr><td>URL: </td><td>
        	<input type=\"text\" name=\"url\"/></td></tr><tr>
        	<td></td><td><input type=\"submit\" value=\"Add\"/></td>
        	</tr></table></form>");
        marker.setInfoWindow(info);
        GoogleMapEventTag event = new GoogleMapEventTag();
        event.setAction("dblclick");
        event.setAsynchronous(false);
        event.setUrl("/GoogleMaps/leave_a_mark.jsp");
        marker.addEvent(event);
        map.addMarker(marker);
    }
    public void processOverlayDoubleClickEvent(GoogleMapTag map, String component, String type) {
        super.processOverlayDoubleClickEvent(map, component, type);
        if (type.equals("marker")) {
            GoogleMapMarkerTag m = map.getMarker(component);
            map.removeMarker(m);
        }
    }
}

  

To see the test in action, click anywhere on the map. A marker will be added, displaying an infowindow with the coordinates loaded.