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.

<zk>
	<script type="text/javascript" content="zk.googleAPIkey='ABQIAAAAmGxmYR57XDAbAumS9tV5fxQXyylOlR69a1vFTcUcpV6DXdesOBSMEHfkewcSzwEwBT7UzVx8ep8vjA'" />
	
	<gmaps id="mymap" width="520px" height="400px" showSmallCtrl="true">
		<attribute name="onMapMove"><![CDATA[
			((Doublebox) self.getFellow("mylat")).setValue(self.getLat());
			((Doublebox) self.getFellow("mylng")).setValue(self.getLng());
		]]></attribute>
		<attribute name="onMapZoom"><![CDATA[
			((Intbox) self.getFellow("myzoom")).setValue(self.getZoom());
		]]></attribute>
		<attribute name="onMapClick"><![CDATA[
			org.zkoss.gmaps.Gmarker gmarker = event.getGmarker();
			if (gmarker != null)
				gmarker.setOpen(true);
		]]></attribute>
		
		<ginfo id="myinfo" open="true">
			<attribute name="content"><![CDATA[
				Hello, <a href="http://www.zkoss.org">ZK</a>.
			]]></attribute>
		</ginfo>
		
		<gmarker id="mymark" lat="37.4410" lng="-122.1490">
			<attribute name="content"><![CDATA[
				Hello, <a href="http://www.zkoss.org">ZK</a> on top of Gmarker.
			]]></attribute>
		</gmarker>
	</gmaps>
</zk>

<zk>
	<grid>
		<rows>
			<row>
				<label value="Latitude:" />
				<doublebox id="mylat" value="${mymap.lat}" hflex="1">
					<attribute name="onChange"><![CDATA[
						mymap.panTo(self.doubleValue(), mymap.getLng());
					]]></attribute>
				</doublebox>
			</row>
			<row>
				<label value="Longitude:" /> 
				<doublebox id="mylng" value="${mymap.lng}" hflex="1">
					<attribute name="onChange"><![CDATA[
						mymap.panTo(mymap.getLat(), self.doubleValue());
					]]></attribute>
				</doublebox>
			</row>
			<row>
				<label value="Zoom Level:" /> 
				<intbox id="myzoom" value="${mymap.zoom}" hflex="1">
					<attribute name="onChange"><![CDATA[
						mymap.setZoom(self.getValue());
					]]></attribute>
				</intbox>
			</row>
			<row>
				<label value="Open Info:" />
				<button label="Change" hflex="1">
					<attribute name="onClick"><![CDATA[
						if(myinfo.isOpen()) {
							mymark.setOpen(true);
							myinfo.setOpen(false);
						} else {
							mymark.setOpen(false);
							myinfo.setOpen(true);
						}
				 	]]></attribute>
				</button>
			</row>
		</rows>
	</grid>
</zk>