Revision history [back]

I am creating a "native" div to hold the google map. The following is a working snippet:

<?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

I am creating a "native" div to hold If you are using the ZK GMaps component i can't help you but if you are using the native google map. The map component the following is a working snippet:should work:

<?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

If you are using The following working snippet does not use the ZK GMaps component i can't help you but component. It wraps a google map inside a "native" div. Maybe if you are using the wrap your component with a native google map component the following should work: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