Search code examples
javagoogle-mapsgoogle-maps-api-3zk

How to get the current location dynamically using ZK framework?


i'm new in zk framework for java and i want the ability of create a map and retrieve the current location dinamically, currently this is my latest code for the map (lat and lng is hard coded that's the problem) :

        <div apply="br.com.minifrete.maps.GoogleMapsController">
        <!-- define the property 'zk.googleAPIkey' (or any other name) 
            as a ZK-library-property, VM-arg or system-property 
            or simply add your APIkey inline instead of ${c:property...} -->
        <!--<script type="text/javascript" content="zk.googleAPIkey='AIzaSyANBdLQzy9acJxEWCc7UOHhpIU9Zv94ZJ0'" />-->
        <script type="text/javascript"
            content="zk.googleAPIkey='AIzaSyANBdLQzy9acJxEWCc7UOHhpIU9Zv94ZJ0'" />
        <gmaps version="3.26" id="gmaps" width="520px"
            height="400px" showSmallCtrl="true" protocol="https">
            <ginfo id="info" open="true"
                content="Hello, &lt;a href=&quot;http://www.zkoss.org\&quot;&gt;ZK&lt;/a&gt;." />
            <gmarker id="marker" lat="37.4410" lng="-122.1490"
                content="Hello, &lt;a href=&quot;http://www.zkoss.org&quot;&gt;ZK&lt;/a&gt; on top of Gmarker." />
        </gmaps>
    </div>

Thanks.


Solution

  • Since ZK is running at the server-side there is no chance get the location from there. The only way (as already mentioned in Malte's comment above) is to use the html5 geolocation api.

    The information obtained from there can be easily sent back to the server using a custom event. I created this zk fiddle example showing how to fire an event from the client side, and how to listen to it in your composer. You can then set the coordinates to the Gmaps component or as I did create a new Gmaps component dynamically.

    Please note: zkfiddle is currently not running under HTTPS so I use dummy coordinates and a setTimeout simulating some delay. However I also provide the code to request the coordinates from navigator.geolocation.getCurrentLocation a line above just commented out.

    Robert