Zul file

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:w="client">
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<window width="100%" height="100%" apply="org.zkoss.bind.BindComposer" 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='MY_API_KEY_ASK_ME_IF_YOU_NEED'" />
                            <gmaps version="3." id="gmaps"   width="100%" showZoomCtrl="true"  lat="@bind(vm.lat)" lng="@bind(vm.lng)" height="500px"  protocol="https" >
                                <!--The marker should be populate in here-->
                            </gmaps>
                        </div>
            </row>
                    <row width="100%">
                     <listbox  width="100%" model="@load(vm.areaList)" 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>
                                    <listcell label=""/>
                                    <listcell label="@bind(item.name)"/>
                                    <listcell label="@bind(item.address)"/>
                                    <listcell label="@bind(item.code)"/>
                                    <listcell label="@bind(item.distance)"/>
                                    <listcell >
                                        <button>Create PO</button>
                                    </listcell>
                            </listitem>
                            </template>
                    </listbox>
                    </row>
        </rows>
    </grid>

        <borderlayout>
                <center border="none" >
                </center>
                <east size="50%" border="none" flex="true">
                </east>
    </borderlayout>
</window>
</zk>