Gmaps not visible when width and height are specified with percentages

answered 2014-06-04 02:48:03 +0800

mhj
806 ● 1 ● 7

updated 2014-06-04 02:51:18 +0800

Hello Antoc put this code example in a zk file and test:

<zk xmlns="http://www.zkoss.org/2005/zul">


<window id="wnd"  height="100%" width="100%" apply="${wndController}">

   <script type="text/javascript"
    content="zk.googleAPIkey='ABQIAAAAmGxmYR57XDAbAumS9tV5fxQXyylOlR69a1vFTcUcpV6DXdesOBSMEHfkewcSzwEwBT7UzVx8ep8vjA'" />
 <gmaps id="gmaps" width="100%" height="100%" showSmallCtrl="true" >
    <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>

</window>

</zk>

I hope that it helps you...

ps: if you some day need the earth look at this: Hello-world-literally

answered 2014-06-04 13:58:53 +0800

cyiannoulis
1201 ● 10

updated 2014-06-04 14:31:41 +0800

The following working snippet does not use the ZK GMaps component. It wraps a google map inside a "native" div. Maybe if you wrap your component with a native div?

<?page title="google maps" contentType="text/html;charset=UTF-8"?>
<?script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY" ?>
<zk>

<window border="none" width="100%" height="100%" xmlns:n="native">

<style>
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>

<borderlayout>
<north>
    <n:h1>Google Maps Demo</n:h1>
    </north>
    <west><n:h3>West</n:h3></west>
    <center border="none">
        <div vflex="true">
            <n:div id="map-canvas" />
        </div>
    </center>
    <east><n:h3>East</n:h3></east>
    <south><n:h3>South</n:h3></south>       
</borderlayout> 

<script type="text/javascript">

    zk.afterMount(function() {
        var mapOptions = {
          center: new google.maps.LatLng(25.0, 25.0),
          zoom: 4
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), 
            mapOptions);
    });

</script>

</window>
</zk>

Hope that helps

Costas

answered 2014-06-04 23:57:45 +0800

mhj
806 ● 1 ● 7

updated 2014-06-05 00:04:47 +0800

Hello Antoc, in the follow link you can download the netbeans project: Gmap_example, I added a browser print for you to take a look...