Gmaps not visible when width and height are specified with percentages

asked 2014-06-03 16:57:52 +0800

Antoc gravatar image Antoc
21 4

I have developed an application that embeds a google map inside a dialog. The problem is that when the width and height of the gmaps is fixed (i.e. width="650px") the gmaps is visible and it works correctly. When instead percentage is used in the width and height (i.e. width="100%"), the gmaps is not visible any more.

Has anyone experience such problem? Is it a known bug or the percentage is not allowed in a gmaps element in the first place?

Thanks in advance!

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted

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

mhj gravatar image mhj flag of Brazil
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."/>



I hope that it helps you...

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

link publish delete flag offensive edit


HI MhJ, unfortunately it doesn't work, the map is not displayed..

Antoc ( 2014-06-04 10:16:18 +0800 )edit

really? when i back home i send the project if you don't mind. i have the code in a netbeans and works fine...

mhj ( 2014-06-04 22:23:57 +0800 )edit

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

cyiannoulis gravatar image cyiannoulis
1191 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" ?>

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

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

    <n:h1>Google Maps Demo</n:h1>
    <center border="none">
        <div vflex="true">
            <n:div id="map-canvas" />

<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"), 



Hope that helps


link publish delete flag offensive edit

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

mhj gravatar image mhj flag of Brazil
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...

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2014-06-03 16:57:52 +0800

Seen: 36 times

Last updated: Jun 05 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More