Gmaps"

From Documentation
Line 12: Line 12:
 
Components: <tt>gmaps, ginfo, gmarker, gpolyline, gpolygon, gimage, and gscreen.</tt>
 
Components: <tt>gmaps, ginfo, gmarker, gpolyline, gpolygon, gimage, and gscreen.</tt>
  
A <tt>gmaps</tt> is a maps component that wraps the famous Google Maps service that you can control it and embedded it in your ZK web application page in pure Java. Inside a <tt>gmaps</tt>, you can manipulate your maps and add contents to the maps and create convenient locality related web application. You can add <tt>ginfo</tt> to represent an anchored information window for the maps. You can add multiple <tt>gmarker</tt>s to indicate special locations. You can add <tt>gpolyline</tt> and <tt>gpolygon</tt> to indicate a path or an area. You can also overlay <tt>gimage</tt> and <tt>gscreen</tt> to indicate very special places.
+
A <tt>gmaps</tt> is a maps component that wraps the famous Google Maps service that you can control it and embedded it in your ZK web application page in pure Java. Inside the <tt>gmap</tt>, you can manipulate your maps and add contents to the maps to create convenient locality related web application. You can add <tt>ginfo</tt> to represent an anchored information window for the maps. You can add multiple <tt>gmarker</tt>s to indicate a special location. You can add <tt>gpolyline</tt> and <tt>gpolygon</tt> to indicate a path or an area. You can also overlay <tt>gimage</tt> and <tt>gscreen</tt> to indicate very special places.
  
 
= Example =
 
= Example =

Revision as of 02:18, 29 July 2011

Gmaps

  • Demonstration: Gmaps
  • Java API: N/A
  • JavaScript API: N/A
  • Style Guide: N/A

Employment/Purpose

Components: gmaps, ginfo, gmarker, gpolyline, gpolygon, gimage, and gscreen.

A gmaps is a maps component that wraps the famous Google Maps service that you can control it and embedded it in your ZK web application page in pure Java. Inside the gmap, you can manipulate your maps and add contents to the maps to 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 a special location. 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.

Example

ZKComRef Gmaps Example.png


 <window title="Gmaps Demo" border="normal" width="520px">
	<script type="text/javascript" content="zk.googleAPIkey='Your-Google-API-Key'"/>
	<gmaps id="mymap" width="500px" height="300px" showSmallCtrl="true">
		<ginfo id="myinfo" open="true">
			<![CDATA[
				Hello, <a href="http://www.zkoss.org">ZK</a>.
			]]>
		</ginfo>
		
		<gmarker id="mymark" lat="37.4410" lng="-122.1490">
			<![CDATA[
				Hello, <a href="http://www.zkoss.org">ZK</a> on top of Gmarker.
			]]>
		</gmarker>
		
		<attribute name="onMapClick">
			Gmarker gmarker = event.getGmarker();
			if (gmarker != null) {
				gmarker.setOpen(true);
			}
		</attribute>
	</gmaps>
 </window>

Supported Events

Name
Event Type
onSelect
Event: SelectEvent

Notifies one that the user has selected a new item(can be Ginfo, Gpolyline, or Gpolygon) in the gmaps.

onInfoChange
Event: InfoChangeEvent

Notifies that the current open information window has changed(opened/closed)

onMapDrop
Event: MapDropEvent

Notifies that some component is dragged and dropped on the gmaps or gmarker component with latitude and longitude information.

onMapClick, onMapDoubleClick, onMapRightClick
Event: MapMouseEvent

Notifies that some mouse action has been applied on the gmaps or gmarker component with latitude and longitude information.

onMapMove
Event: MapMoveEvent

Notifies that the view center (latitude, longitude) of the gmaps has been moved.

onMapTypeChange
Event: MapTypeChangeEvent

Notifies that the map type of the gmaps has been changed.

onMapZoom
Event: MapZoomEvent

Notifies that the zoom level of the gmaps has been changed.

Supported Children

* Ginfo,  Gmarker, Gpolyline, Gpolygon, Gimage, Gscreen

Use Cases

Version Description Example Location
     

Version History

Last Update : 2011/07/29


Version Date Content
     



Last Update : 2011/07/29

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.