currently i am trying to build a Cordova App that should be using google maps so i can show routes and stuffs. For testing reason i also have the code on a server and everything is working perfectly there, the map is loading probably. But when i convert the project into an Cordova app, the google map wont load and i dont know why.
This is how my JS code in the index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>-----</title>
</head>
<!-- jQuery Version 1.11.0 -->
<script type="application/javascript" src="./js/jquery-1.11.0.js"></script>
<!-- Google Maps API -->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCr0wsx4a5_o03hPTpC_CtRARjzCnOEGX4&sensor=false&libraries=places">
</script>
<!-- Style CSS -->
<link href="./css/style.css" rel="stylesheet">
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if(isMobile.any()) {
(function (global) {
"use strict";
function onDeviceReady () {
document.addEventListener("online", onOnline, false);
document.addEventListener("resume", onResume, false);
loadMapsApi();
}
function onOnline () {
loadMapsApi();
}
function onResume () {
loadMapsApi();
}
function loadMapsApi () {
if(navigator.connection.type === Connection.NONE || google.maps) {
return;
}
$.getScript('http://maps.googleapis.com/maps/api/js?key=AIzaSyCr0wsx4a5_o03hPTpC_CtRARjzCnOEGX4&sensor=false&libraries=places');
}
global.onMapsApiLoaded = function () {
// Maps API loaded and ready to be used.
var map = new google.maps.Map(document.getElementById("map"), {});
};
document.addEventListener("deviceready", onDeviceReady, initialize);
})(window);
alert("");
}
function initialize() {
var styles = [{"featureType":"water","elementType":"all","stylers":[{"hue":"#76aee3"},{"saturation":38},{"lightness":-11},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"hue":"#8dc749"},{"saturation":-47},{"lightness":-17},{"visibility":"on"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"hue":"#c6e3a4"},{"saturation":17},{"lightness":-2},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"hue":"#cccccc"},{"saturation":-100},{"lightness":13},{"visibility":"on"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"hue":"#5f5855"},{"saturation":6},{"lightness":-31},{"visibility":"on"}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"all","stylers":[]}];
var styledMap = new google.maps.StyledMapType(styles, {name: ""});
directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: {
strokeColor: "red"
}});
var mapOptions = {
center: new google.maps.LatLng(47.6826215,13.0984208,17),
zoom: 15,
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
map.setOptions({styles: styles});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(47.67052,13.114028),
new google.maps.LatLng(47.6910273,13.1153865));
var options = {
bounds: defaultBounds,
};
var start_input = document.getElementById('start');
start_autocomplete = new google.maps.places.Autocomplete(start_input, options);
var end_input = document.getElementById('end');
end_autocomplete = new google.maps.places.Autocomplete(end_input, options);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
