Is it possible to use Google Maps API V3 for mobile app development when using PhoneGap/Cordova? My index page has a link to a map page that has the following in it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Map Page</title>
</head>
<body>
<div class="app">
<div id="map-canvas"></div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
$('#map-canvas').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':false, 'callback': function() {}});
</script>
</body>
</html>
I'm including the Google Maps jQuery plugin and the other necessary files. When I test the app in my desktop browser, Ripple, and (mysteriously) on my old Samsung Galaxy S the map loads up just fine. When I try it in the Android emulator or on an Galaxy S4 the map does not load and I am left with an empty white page. Is there a different/better way I could be using Google Maps on and Android app or is there something I need to change in my above code? Thanks.
Change your script tag to:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false" />
I believe the one you are using is for v2 as stated here
In my case the google apis couldn't be loaded because the app didn't had permission to access the internet.
So dont' forget to add internet access permission to your app in your AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
And for other features (location, camera,...) make sure the corresponding permission has been set for this app and device
Related
I am trying to generate an apk for a polymer app using cordova. But i am facing difficulty as the generated apk is not able to render properly in the mobile application (Android version 6.0 which is > 4.1 which is supported by Polymer). I referred this for building the app but it did not work. The polymer app is woking as expected in the web browser but when in apk form in a mobile it does not work.
Contents of Index.html
<html>
<head>
<title>myApp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="/src/main-app/main-app.html">
<link rel="import" href="/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/bower_components/gold-phone-input/gold-phone-input.html">
</head>
<body class="app">
<paper-header-panel class="flex">
<paper-toolbar class="medium-tall">
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<!-- flex class forces span to fill space between icons -->
<span class="flex">Title</span>
<!-- icon displays at right because of span class above -->
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
<paper-tabs class="bottom fit" selected="0">
<paper-tab>ONE</paper-tab>
<paper-tab>TWO</paper-tab>
</paper-tabs>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
<gold-phone-input country-code="91" phone-number-pattern="XX-XX-XXXXXX">
</gold-phone-input>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
I have also tried adding Crosswalk to Cordova but it still does not work.
Please let me know if any more information is required.
Will Appreciate any help.
Hi I have made a hello world type of application in PhoneGap. I have index.html in www directory but it is displaying something default home page of phonegap. Please see attached screenshot that it is displaying always.
index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<form>
Select your favourite color: <input type="color" name="favcolor">
<br/>
<input type="button" value="SUBMIT" />
</form>
</body>
</html>
But when I run the app in android phone it always display this. I have done 3-4 rebuild complete project but still same.
I am not sure what is going wrong or missing.
Thanks in advance.
I think you are making changes to www folder present inside the platforms added.
Try to make changes in the www folder which is present in the root folder of your project and then take a build and it will definitely work.
Check This:
Hi I have made a hello world type of application in PhoneGap. I have index.html in www directory but it is displaying something default home page of phonegap. Please see attached screenshot that it is displaying always.
index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<form>
Select your favourite color: <input type="color" name="favcolor">
<br/>
<input type="button" value="SUBMIT" />
</form>
</body>
</html>
But when I run the app in android phone it always display this. I have done 3-4 rebuild complete project but still same.
I am not sure what is going wrong or missing.
Thanks in advance.
I think you are making changes to www folder present inside the platforms added.
Try to make changes in the www folder which is present in the root folder of your project and then take a build and it will definitely work.
Check This:
I use Cordova.jar 2.9.0.
Here is the code:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#BtnNavigation").click(function () {
alert("dfgdfgh");
window.location.assign("guidance-drive://v2.0/navigate/destination/?latlon='25.245789','75.254789'&title=Hello World");
});
});
</script>
</head>
<body>
"http://example.com"
<button id="BtnNavigation" name="Map" style="padding: 50px 100px;">Map</button>
</body>
</html>
Button click shows error:
The Protocol Not Supported(guidance-drive://v2.0/navigate/destination/?latlon='25.245789','75.254789'&title=Hello World)
some text to get rid of "it looks like your post is mostly code; please add some more details"
The Url Scheme used with Windows Phone 8 devices is not implemented with Nokia X devices, and thus you can not use it with Nokia X devices. Also as far as I know, there is no public offering for HERE Drive usage implemented with Nokia X, thus I could not even suggest any alternative API to use.
I'm using Phonegap + JQueryMobile + JQuery to create a map inside my index.html. There's a problem, in the browser my code works fine but when I try to run on my phone then not shows the map.
Here's the code:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script
src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="datepicker.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
<script type="text/javascript">
$(function() {
$("#map").gmap();
});
</script>
</head> <body><div id="map" style="height: 350px; width: 600px"></div></body></html>
I think that the the errors are on the script sources because i need to import the correct gmap for phones but i don't know.
Thanks!
Have you enabled internet access in AndroidManifest.xml?
<uses-permission android:name="android.permission.INTERNET" />