Hi Guys,
Well, I have been kind of researching on creating android applications using HTML5 for a few days. I thought, better start with a demo of maps on android. Since Google poses very strict usage policies regarding its maps, I opted to go with OpenStreetMaps to avoid all the plagiarism, copyright and whatever issues.
Anyways, enough of other talks. Here is what I am going to show you guys.
I am going to develop an PhoneGap application, demonstrating the use OpenStreetMaps with Google maps api V3 for Android devices.
Well, I have been kind of researching on creating android applications using HTML5 for a few days. I thought, better start with a demo of maps on android. Since Google poses very strict usage policies regarding its maps, I opted to go with OpenStreetMaps to avoid all the plagiarism, copyright and whatever issues.
Anyways, enough of other talks. Here is what I am going to show you guys.
I am going to develop an PhoneGap application, demonstrating the use OpenStreetMaps with Google maps api V3 for Android devices.
Pre-requirements:
1. Eclipse with android SDK (Offcourse).
2. Latest version of PhoneGap from here.
3. A few basic on documentation of OpenStreetMap tiles as a layer within a Google Map from this link here.
Set-up
Well assuming that you have downloaded PhoneGap, kindly import the example for android into your eclipse. Your example for android should be placed in a path which looks something like this:
phonegap-2.3.0\lib\android\example
Well, once having imported, never bother about the source folder. Go straight away to "assets" folder and open index.html file.
For all those people new to PhoneGap, here is small helpful tip from what I have understood. PhoneGap helps provide a touch interface to web layer. In layman words, PhoneGap helps convert mouse clicks on normal desktops to touch interface on mobile devices.
Let's start coding
Well, before starting the coding, kindly have a look at documentation of using OpenStreetMap tiles as a layer within a Google Map, in the link provided here. Copy the "Example Using Google Maps API V3 o" code in a notepad, name the file as some Test.html and double click it. The file should open in your default browser showing OpenStreetMaps.
Now, all I will be doing is use the same code in index.html with a few small alterations.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Google Maps v3 API Example</title>
// Create CSS layer for displaying maps on mobile devices
<style type="text/css">
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
//Identify the device whether android or ios
<script>
if (navigator.userAgent.toLowerCase().match(/android/)) {
document.write('<script charset="utf-8" src="cordova-1.5.0-android.js"><\/script>');
} else if (navigator.userAgent.toLowerCase().match(/iphone/) || navigator.userAgent.toLowerCase().match(/ipad/)) {
document.write('<script charset="utf-8" src="cordova-1.5.0.js"><\/script>');
}
</script>
</head>
<body>
<div id="map"></div>
<!-- bring in the google maps library -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//Google maps API initialisation
var element = document.getElementById("map");
//Define the properties of the OSM map to be displayed
var map = new google.maps.Map(element, {
center: new google.maps.LatLng(57, 21),
zoom: 3,
mapTypeId: "OSM",
mapTypeControl: false,
streetViewControl: false
});
//Define OSM map type pointing at the OpenStreetMap tile server
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
}));
</script>
</body>
</html>
Hope the code is self explanatory with all those comments. So, I mention it again, all you need to do is place the above code in index.html file in your assets folder and the application is ready to work. You need not starch your head on altering permissions in Android Manifest for PhoneGap helps take care of all those requirements.
Kindly feel free to leave your comments if you found this article helpful. Also, leave me any queries in the comments section, and I would try getting back to you ASAP.
Thanks guys.
