I am developing an app for my organization which require to show its office location on Map, when user clicks on the link app will open google map on browser and display the route between user current location and the selected office marker. This is perfectly working fine in Android App but not working on iPhone/iPad apps. I am using below code:
I have declared the google api script in index.html file
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
below is the code for location.html file
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
</head>
<body style="display: none; background-color: silver; color: green; font-size: small;">
<div data-role="main" class="ui-content">
<div data-role="content" id="contentMap">
<div id="map_canvas" style="position: absolute !important; top: 10px !important; right: 0; bottom: 5px !important; left: 0 !important;"></div>
</div>
</div>
<script src="js/location.js"></script>
</body>
</html>
below is the code for location.js file:
/* JavaScript content from js/location.js in folder common */
function OfficeLocation(latitude,longitude,name,address){
this.latitude = latitude;
this.longitude = longitude;
this.name = name;
this.address = address;
}
var officeLocationArray = [
new OfficeLocation(32.3947198, -90.1457959, "office location 1", "office location 1"),
new OfficeLocation(31.7138728, -89.1492813, "office location 1", "office location 1"),
new OfficeLocation(32.2777552, -90.1223944, 'office location 1', 'office location 1')
];
// would be used as users current location
var usersLat;
var usersLng;
var youAreHereMarkers; //markers to represent current user location ( blue marker is used). can replace with any image or gifs ( like blue dot gifs)
var map; //
var mapURL; //users location and destination selected by user are stored in this variablse in order to use it to open google map in new browser with route visible
var currentPosition; // will store lat/lng location for google map api.
var infowindow; //displays information about the location when user clicks marker on map
/**
* everthing happens here
*
* on success : getuser location,get new map , add user markers, add win job markers , add marker listeners that lets you open original google map with direction
* on failure: get new map, add all winjob marker
*/
$("#divLocation").on("pageshow", function(event, ui) {
alert("map initiliaziation started");
getUsersCurrentLocationAndPopulateMap();
});
/**
*
*/
function getUsersCurrentLocationAndPopulateMap() {
var options = {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
};
navigator.geolocation.getCurrentPosition(locationFound, locationNotFound, options);
}
/**
* creates new map, and adds all marker related information
* @param pos
*/
function locationFound(pos){
try{
var coords = pos.coords;
usersLat = coords.latitude;//pos.coords.latitude;
usersLng = coords.longitude;//pos.coords.longitude;
getNewMap();
addUsersLocationMarker();
addAllMarkers();
}catch (e) {
alert(e.message);
}
}
/**
* user location is not determined.
* possible gps sensor problem
* @param err
*/
function locationNotFound(err){
showAlert("Unable to determine your location.");
getNewMap();
addAllMarkers();
alert('ERROR(' + err.code + '): ' + err.message);
}
/**
* new map is created
*/
function getNewMap() {
try{
var zoomlevel = 7;
var usersLocation = new google.maps.LatLng(usersLat, usersLng);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom : zoomlevel,
center : usersLocation,
mapTypeId : google.maps.MapTypeId.ROADMAP
});
}catch(e){
alert(e.message);
}
}
/**
* place users locatin markers on map and also all win job locations markers
* based on array provided
*/
function addUsersLocationMarker(){
try{
var blueMarker = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
new google.maps.Size(37, 34), new google.maps.Point(0, 0),
new google.maps.Point(0, 19));
//placing users location map
//http://maps.google.com/mapfiles/ms/icons/blue-dot.png
youAreHereMarkers = new google.maps.Marker({
position : new google.maps.LatLng(usersLat, usersLng),
map : map,
animation : google.maps.Animation.BOUNCE,
title : "You are Here",
icon : blueMarker//'images/here.png'
});
}catch (e) {
alert(e.message);
}
}
/**
* reads all the marker informatin from officeLocationArray and place it on the map as clickable markers
*/
function addAllMarkers() {
//clickable region
var shape = {
coord : [ 1, 1, 1, 20, 18, 20, 18, 1 ],
type : 'poly'
};
// populalte markers on all WIN Job Center location
var numberOfLocations = officeLocationArray.length;
for (var i = 0; i < numberOfLocations; i++) {
var ofcLocation = officeLocationArray[i];
var flag = new google.maps.MarkerImage(
'http://googlemaps.googlermania.com/google_maps_api_v3/en/Google_Maps_Marker.png',
new google.maps.Size(37, 34), new google.maps.Point(0, 0),
new google.maps.Point(0, 19));
var myLatLng = new google.maps.LatLng(parseFloat(ofcLocation.latitude), parseFloat(ofcLocation.longitude));
var marker = new google.maps.Marker({
position : myLatLng,
map : map,
icon : flag,
shape : shape,
title : ofcLocation.name + "\n" + ofcLocation.address
});
// listens if user clicks on marker to display infowindow, and eventually driving to google map in new browser
google.maps.event.addListener(marker,'click',function() {
try{
if(infowindow){
infowindow.close();
}
map.setZoom(8);
map.setCenter(marker.position);
var destinationAddress = this.getTitle().split("\n");
mapURL = "http://www.google.com/maps/dir/'"+ usersLat + "," + usersLng + "'/'"+ destinationAddress[0]+","+ destinationAddress[1] + "'";
var contentString=destinationAddress[0]+ /*"<br />"+ destinationAddress[1]+*/ "<br/><div><a href='#' onClick='openGoogMap()' > Go to this location </a></div>";
infowindow = new google.maps.InfoWindow({
maxWidth: 200,
content : "<div style='overflow:hidden;line-height:1.35;min-width:200px;'>"+contentString+"</div>"
});
infowindow.open(map, this);
// showAlert(openMapString);
}catch (e) {
alert(e.message);
}
});
}
}
/**
* opens google map in a browser with information appended in mapURL
*/
function openGoogMap() {
WL.App.openURL(mapURL);
}
Any help is appreciated.
UPDATE
Worklight Version : 6.2.0.0
Xcode Version : 6
Okey. Got the answer. Since I was building my app in XCode 6 and using worklight version 6.2.0.0, that's why this piece of code creating problems. You can read about the issue from IBM Website. To solve this issue download the following fix pack which will update your worklight version to 6.2.0.1. After doing that, you have to add following entry in pathToYourProject\YourProject\apps\yourAppName\iphone\native\yourAppName-Info.plist file:
Build and Redeploy your app, it should work fine now.