Creating a multiplatform webapp with HTML5 and Google maps
- by Bart L.
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>
