zuL MAP

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul">
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<window width="70%" height="100%" apply="org.zkoss.bind.BindComposer" title="Check Availability On Area" mode="modal" closable="true" viewModel="@id('vm') @init('com.eksad.ddms.gigr.h3.web.viewmodel.checkarea.CheckAvailabilityOnAreaVM')" >
    <grid >
        <columns>
        <column label="" width="100%" height="300px"/>
        </columns>
		<rows>
                    <row>
                        <div width="100%">
                            <script type="text/javascript" content="zk.googleAPIkey='AIzaSyAFj1s9t7ids-3VPX6io4awRgBOViZPRz4'" />
                            <gmaps version="3." id="gmaps"   width="100%"  showZoomCtrl="true"  lat="@bind(vm.lat)" lng="@bind(vm.lng)" height="500px" zoom="16" protocol="https" children="@load(vm.ahassAvailables)">
                                <template name="children">
                                    <gmarker  lat="@bind(each.longitute)" lng="@bind(each.latitude)" iconImage="/asset/img/placeholder.png" width="40px" height="40px"  open="true" >
                                        <custom-attributes org.zkoss.zul.image.preload="true" />
                                        <attribute name="content">
                                        <![CDATA[
                                        <zk xmlns:w="client">
                                        <span>- ${each.name}</span></br>
                                        <span>- ${each.address}</span></br>
                                        </zk>
                                        ]]>
                                        </attribute>
                                    </gmarker>
                                </template>
                            </gmaps>
                        </div>
			</row>
<!--                    <row width="100%" >

                    </row>-->
		</rows>
	</grid>
        <space/>
            <listbox  width="100%" height="300px" model="@load(vm.ahassAvailables)" mold="paging" pageSize="5"  emptyMessage="no data found"  >
                            <listhead>
                                    <listheader label="Part Number"/>
                                    <listheader label="Name"/>
                                    <listheader label="Address"/>
                                    <listheader label="Kode"/>
                                    <listheader label="Distance"/>
                                    <listheader label="Acction"/>
                            </listhead>
                            <template name="model" var="item">
                            <listitem visible="@load((item.distance) ne 0 ? 'true' : 'false')">
                                    <listcell label="@bind(item.partNumber)"/>
                                    <listcell label="@bind(item.name)"/>
                                    <listcell label="@bind(item.address)"/>
                                    <listcell label="@bind(item.code)"/>
                                    <listcell label="@bind(c:cat3(item.distance,' - ','KM'))"/>
                                    <listcell >
                                        <button>Create PO</button>
                                    </listcell>
                            </listitem>
                            </template>
                    </listbox>
                    <space/>
                    <div align="right">
                            <button label="Create Hotline Ke Main Dealer">
                            </button>
                    </div>
</window>
</zk>