How to display a Google Map on Worklight App

I have the following files in Worklight. I want to load the map on the worklight app. It is visible in the "Design" view but neither on simulator nor on emulator. Kindly help.

//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);

How to do it?

Major revision to the answer based on the comments and edits made to the question

See the following Worklight 6.1.0.1 sample project, that demonstrates page navigation and loading of Google Maps in another page in the app.

This sample is based on the same multi-page sample provided by IBM, that your code snippets above are based on:

Multi-page application with Google Maps

Tesed in Worklight Console preview as well as iOS Simulator.

Better separate the Javascript from the index.html file and then follow the below steps.

You can simply pass the value on onchange event like

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

Then

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;
    }
}

来源：https://stackoverflow.com/questions/22684553/how-to-display-a-google-map-on-worklight-app

标签

javascript

google-maps

ibm-mobilefirst