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.

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<div apply="demo.reporting.google_map.GoogleMapsController">
	<!-- define the property 'zk.googleAPIkey' (or any other name) 
		 as a ZK-library-property, VM-arg or system-property 
		 or simply add your APIkey inline instead of ${c:property...} -->
	<!-- <script type="text/javascript" content="zk.googleAPIkey='your-google-API-key'" /> -->
	<script content="zk.googleAPIkey='${c:property('zk.googleAPIkey')}'" />
 	<gmaps 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>

<zk>
	<grid apply="demo.reporting.google_map.GoogleMapsConfigController" hflex="min">
		<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>

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);
		}
	}
}

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());
	}	

}