I'm struggling
how to develop a webapp for Android and iOS.
My first app was a simple todo app which was easy
to test in my browser and it only used html, javascript and css.
However, I have
to create an app which uses Google Maps Api
to get the location.
I created a simple html5 page
to test which places a marker on a map.
It works fine when testing it on my local server. But when I create an .apk file for Android, the app doesn't work.
So I'm wondering, isn't it possible
to use it like this? Do I have the
use the phonegap libraries
to use their geolocation library?
And if so,
how do you handle the development of a webapp in phonegap for multiple OS?
Do you have
to install an Android environment and an iOS environment
to each include the right phonegap library and
to test them properly?
Update: I
use the following code on my webserver and it works perfectly.
When I upload it in a zip-folder
to the photogap cloud and install the APK file on my phone, it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Geo test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '200px';
mapcanvas.style.width = '200px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
<article></article>
</body>
</html>
