How to populate Gmarker dynamically on Gmaps using ZK Framework

Question

I need help to populate Gmarker dynamically by data lng and lat from my database and showing in my ZK application, i am using Gmaps v.3.0.4

I have adding the marker inside the zul file and try to use forEach but only one marker is showed.

<gmaps version="3." id="gmaps" width="100%" showZoomCtrl="true" lat="@bind(vm.lat)" lng="@bind(vm.lng)" height="500px"  protocol="https" >
    <gmarker forEach="@load(areaList)" lat="@bind(each.lat)" lng="@bind(each.lng)" open="true">
    </gmarker>
</gmaps>`

The marker should be show as much as possible.

this is my complete code ZUl file and ViewmModel

Answer 1

Try:

<gmaps version="3." id="gmaps" width="100%" showZoomCtrl="true" lat="@bind(vm.lat)" lng="@bind(vm.lng)" height="500px"  protocol="https" children="@load(vm.areaList)">
    <template name="children">
        <gmarker lat="@load(each.lat)" lng="@load(each.lng)" open="true" />
    </template>
</gmaps>

I haven't tested it but hopefully it helps.