Google Maps API JavaScript et ZK

-1

Je travaille dans ZK et maintenant je dois utiliser les cartes Google API. J'ai utilisé cette API dans d'autres frameworks parfois. Je ne montre pas les cartes. Premièrement, je pensais que le problème pouvait être le CSS, mais ce n'est pas le cas. J'ai ajouté une fonction initialize (maps) à un événement onLoad de windows mais j'avais toujours le même problème. Je débogue le code dans le navigateur avec la console js et j'ai vu que la charge de l'évènement window n'est pas disponible donc j'ai appelé la fonction initialize de l'évènement load de la div (qui contient les maps), la console js message. J'utilise une directiveGoogle Maps API JavaScript et ZK

<div id="map_canvas" style="width: 320px; height: 480px;" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="initialize()"></div>

Mais la div n'a pas été démontré. Enfin j'ai utilisé un pur élément HTML, en utilisant la balise html de ZK:

<html><![CDATA[ 
    <div id="map_canvas" onload="initialize()" style="width: 320px; height: 480px;"/> 
]]></html>

mais le résultat dans la console js est de nouveau

<div class="noscript"><p>Sorry, JavaScript must be enabled.<br/>Change your browser options, then <a href="">try again</a>.</p></div>

Je voudrais savoir ainsi la fonction qui montre la les cartes ne le font pas. Je pense que le problème est le js mais je ne suis pas sûr, est-ce que quelqu'un me dit si le problème est le js appelé s'il vous plaît?

Merci.

Edit:

J'ai utilisé cette façon de le faire (Merci beaucoup à Sean Connolly: How get the zk element id from js)

<zk> 
    <script type="text/javascript" 
      src="http://maps.googleapis.com/maps/api/js?key=API_KEY&amp;sensor=false"> 
</script> 

<script type="text/javascript">  
    var map; 
    function initialize() { 

     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var mapOptions = { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(zk.Widget.$(jq('$map_canvas2')).$n(), mapOptions); 
    }  
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<div id="map_canvas2" style="width: 1320px; height: 1480px;" />

Source

2013-08-13 kiuby_88

Question éditée. –

-1

Je pense que vous voulez quelque chose comme ceci:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

var geocoder; 
var map; 
function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var mapOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
} 

function codeAddress() { 
    var address = document.getElementById("address").value; 
    geocoder.geocode({'address': address}, 
    function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 

      alert(results[0].geometry.location.latlng[0]); 



     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 
initialize(); 
</script> 

<div id="map_canvas" style="width: 320px; height: 480px;" onClick="initialize()"></div>

Source

2013-08-13 12:22:00 Marta

Merci beaucoup mais ce code n'est pas correct pour ZK. –

Google Maps API JavaScript et ZK

Répondre

Questions connexes