Theme:
Processing...
Description & Source Code

ZK's gmaps component is a wrapper for the Google Map service which allows developers to embed and control Google Maps in ZK web application using pure Java.

On a gmaps component, you can manipulate your maps and add contents to the maps and create convenient locality related web application. You can add ginfo to represent an anchored information window for the maps. You can add multiple gmarkers to indicate special locations. You can add gpolyline and gpolygon to indicate a path or an area. You can also overlay gimage and gscreen to indicate very special places.

This feature requires ZK EE. It can also be used independently under commerical or GPL license.
google_map.zul
<div apply="demo.reporting.google_map.GoogleMapsController">
	<script type="text/javascript" 
		content="zk.googleAPIkey='ABQIAAAAmGxmYR57XDAbAumS9tV5fxQXyylOlR69a1vFTcUcpV6DXdesOBSMEHfkewcSzwEwBT7UzVx8ep8vjA'" />
	
 	<gmaps version="3.9" id="gmaps" width="520px" height="400px" showSmallCtrl="true" >
		<ginfo id="info" open="true" 
			content="Hello, &lt;a href=&quot;http://www.zkoss.org\&quot;&gt;ZK&lt;/a&gt;."/>
		<gmarker id="marker" lat="37.4410" lng="-122.1490" 
			content="Hello, &lt;a href=&quot;http://www.zkoss.org&quot;&gt;ZK&lt;/a&gt; on top of Gmarker."/>
	</gmaps>
</div>
google_map_ctrl.zul
<zk>
	<grid apply="demo.reporting.google_map.GoogleMapsConfigController">
		<rows>
			<row>
				<label value="Latitude:" />
				<doublebox id="latitude" hflex="1" />
			</row>
			<row>
				<label value="Longitude:" /> 
				<doublebox id="longitude" hflex="1" />
			</row>
			<row>
				<label value="Zoom Level:" /> 
				<intbox id="zoom" hflex="1" />
			</row>
			<row>
				<label value="Open Info:" />
				<button id="toggleInfo" label="Toggle Info" hflex="1" />
			</row>
		</rows>
	</grid>
</zk>
GoogleMapsController.java
package demo.reporting.google_map;

import org.zkoss.gmaps.Gmarker;
import org.zkoss.gmaps.event.MapMouseEvent;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;

public class GoogleMapsController extends SelectorComposer<Component>{

	@Listen("onMapClick = #gmaps")
	public void onMapClick(MapMouseEvent event) {
		Gmarker gmarker = event.getGmarker();
		if(gmarker != null) {
			gmarker.setOpen(true);
		}
	}
}
GoogleMapsConfigController.java
package demo.reporting.google_map;

import org.zkoss.gmaps.Ginfo;
import org.zkoss.gmaps.Gmaps;
import org.zkoss.gmaps.Gmarker;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Doublebox;
import org.zkoss.zul.Intbox;

public class GoogleMapsConfigController extends SelectorComposer<Component> {

	@Wire
	private Gmaps gmaps;
	
	@Wire
	private Ginfo info;
	
	@Wire
	private Gmarker marker;
	
	@Wire
	private Doublebox latitude, longitude;
	
	@Wire
	private Intbox zoom;
	
	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		
		latitude.setValue(gmaps.getLat());
		longitude.setValue(gmaps.getLng());
		zoom.setValue(gmaps.getZoom());
	}
	
	@Listen("onChange = #latitude, #longitude" )
	public void onPositionChange() {
		gmaps.panTo(latitude.getValue(), longitude.getValue());
	}
	
	@Listen("onChange = #zoom" )
	public void onZoomChange() {
		gmaps.setZoom(zoom.getValue());
	}

	@Listen("onClick = #toggleInfo") 
	public void onToggleInfo() {
		if (info.isOpen()) {
			marker.setOpen(true);
			info.setOpen(false);
		} else {
			marker.setOpen(false);
			info.setOpen(true);
		}
	}	
	
	@Listen("onMapMove = #gmaps") 
	public void onMapMove() {
		latitude.setValue(gmaps.getLat());
		longitude.setValue(gmaps.getLng());
	}	

	@Listen("onMapZoom = #gmaps") 
	public void onMapZoom() {
		zoom.setValue(gmaps.getZoom());
	}	

}