Comment afficher une application Google Map sur Worklight

J'ai les fichiers suivants dans Worklight. Je souhaite charger la carte sur l'application worklight. Il est visible dans la vue "Design", mais pas sur le simulateur ni sur l'émulateur. Aide aimablement.

//index.html <div id="pagePort"></div> //page1.html <script src="js/page1.js"></script> <div id="content"> <button type="button" onclick="loadPage5();">Click</button> </div> //page1.js function loadPage5() { var pagepath="page5.html"; pagesHistory.push("page1.html"); $("#pagePort").load(pagepath,function(){WL.Logger.info("Page Loaded");}); } //page5.html <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <body> <div id="map-canvas"></div> <script src="js/page5.js"></script> <script src="js/page1.js"></script> <script src="js/initOptions.js"></script> <script src="js/main.js"></script> <script src="js/messages.js"></script> </body> //page5.js function initialize() { var myLatlng1 = new google.maps.LatLng(28.5084805,77.2272778); var mapOptions = { zoom: 11, center: myLatlng1 } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker1 = new google.maps.Marker({ position: myLatlng1, map: map, }); google.maps.event.addDomListener(window, 'load', initialize); 

Comment faire?

Révision majeure de la réponse en fonction des commentaires et des modifications apportées à la question

Consultez l'exemple de projet Worklight 6.1.0.1, qui démontre la navigation de la page et le chargement de Google Maps dans une autre page de l'application.

Cet exemple est basé sur le même échantillon de plusieurs pages fourni par IBM que vos extraits de code ci-dessus sont basés sur:

  • Application multipage avec Google Maps

Testé dans l'aperçu de la console Worklight ainsi que sur iOS Simulator.

Mieux vaut séparer le Javascript du fichier index.html , puis suivre les étapes ci-dessous.

Vous pouvez simplement passer la value sur l'événement onchange comme

 <select onchange="initialize(" + this.value + ")"> 

alors

 function initialize(value) { // process the value var myLatlng1 = new google.maps.LatLng(28.5084805,77.2272778); var myLatlng2 = new google.maps.LatLng(28.6473116,77.1559846); var mapOptions = { zoom: 11, switch(value){ case "south": center: myLatlng1; break; case "west": center: myLatlng2; break; } }