Revision history [back]

click to hide/show revision 1
initial version

asked 2017-05-01 11:44:32 +0800

tredmond gravatar image tredmond

Does ZK GMaps work?

Hi, I'm evaluating ZK 8 EE and I've been trying to get it to display a Google Map. I've used the example from the demo i.e.

<script type="text/javascript" content="zk.googleAPIkey='MYKEY'"/> <gmaps version="3.26" id="gmaps" width="520px" height="400px" showsmallctrl="true" protocol="https"> <ginfo id="info" open="true" content="Hello, &lt;a href="http://www.zkoss.org\"&gt;ZK&lt;/a&gt;."/> <gmarker id="marker" lat="51.508742" lng="-0.120850" open="true" content="Hello, &lt;a href="http://www.zkoss.org"&gt;ZK&lt;/a&gt; on top of Gmarker."/> </gmaps>

I registered for my key (MYKEY), put it in and tried to access on localhost. Javascript console warns about Missing API Key. Accessing from 127.0.0.1 or the machines IP shows a map of Palo Alto and gmarker coordinates are ignored. Console shows NoApiKeys warning. Looking at HTTP trace shows that the 'key' parameter is missing from the gmapz calls. Has anyone got this to work properly.

I got so frustrated with this I decided to write a simple HTML page as follows:

<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

    <h1>My First Google Map</h1>

    <div id="googleMap" style="width:100%;height:400px;"></div>

    <script>
    function myMap() {
    var mapProp= {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
    };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>
</body>

</html>

This worked first go. Any ideas??

Thanks

Does ZK GMaps work?

Hi, I'm evaluating ZK 8 EE and I've been trying to get it to display a Google Map. I've used the example from the demo i.e.

<div apply="com.eg.MyMapController">

    <script type="text/javascript" content="zk.googleAPIkey='MYKEY'"/>
content="zk.googleAPIkey='MYKEY'" />
    <gmaps version="3.26" id="gmaps" width="520px" height="400px" showsmallctrl="true" showSmallCtrl="true" protocol="https">
        <ginfo id="info" open="true"  content="Hello, &lt;a href="http://www.zkoss.org\"&gt;ZK&lt;/a&gt;."/>
href=&quot;http://www.zkoss.org\&quot;&gt;ZK&lt;/a&gt;."/>
        <gmarker id="marker" lat="51.508742" lng="-0.120850" open="true" open="true"
            content="Hello, &lt;a href="http://www.zkoss.org"&gt;ZK&lt;/a&gt; href=&quot;http://www.zkoss.org&quot;&gt;ZK&lt;/a&gt; on top of Gmarker."/>
    </gmaps>
</div>

I registered for my key (MYKEY), put it in and tried to access on localhost. Javascript console warns about Missing API Key. Accessing from 127.0.0.1 or the machines IP shows a map of Palo Alto and gmarker coordinates are ignored. Console shows NoApiKeys warning. Looking at HTTP trace shows that the 'key' parameter is missing from the gmapz calls. Has anyone got this to work properly.

I got so frustrated with this I decided to write a simple HTML page as follows:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

<body>


        <h1>My First Google Map</h1>

     <div id="googleMap" style="width:100%;height:400px;"></div>

     <script>
     function myMap() {
     var mapProp= {
         center:new google.maps.LatLng(51.508742,-0.120850),
         zoom:5,
     };
     var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
     }
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>
 </body>
</html>

</html>

This worked first go. Any ideas??

Thanks

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