- \n\t\t\t
- \n\t\t\t\t
![\"\"](\"https:\/\/polyetilen.lt\/wp-content\/uploads\/2011\/07\/android_emulator_google_map-640x588.jpg\")
<\/a>\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n
\nThis android geolocation application uses PhoneGap api for phone geo position and displays the phone position point on Google Maps. jQuery Mobile is used to display the page header, footer and content map. Page is resized to full height and width for any orientation or window size. Made with Eclipse and Android SDK. This demo also works on Chrome browser. <\/p>\n\r\n<!DOCTYPE html>\r\n<html> \r\n<head>\r\n <meta charset="utf-8">\r\n <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">\r\n <title>Map<\/title>\r\n \r\n <link rel="stylesheet" href="css\/jquery.mobile-1.0.1.css" \/>\r\n \r\n <script type="text\/javascript" src="js\/jquery-1.6.4.js"><\/script>\r\n <script type="text\/javascript" src="js\/jquery.mobile-1.0.1.js"><\/script>\r\n <script type="text\/javascript" src="http:\/\/www.google.com\/jsapi"><\/script>\r\n <script type="text\/javascript" src="js\/cordova-1.5.0.js"><\/script>\r\n \r\n<script type="text\/javascript">\r\n\r\nvar map;\r\nvar marker;\r\nvar infowindow;\r\nvar watchID;\r\n\r\n$(document).ready(function(){\r\n\tdocument.addEventListener("deviceready", onDeviceReady, false);\r\n\t\/\/for testing in Chrome browser uncomment\r\n\t\/\/onDeviceReady();\r\n});\r\n\r\n\/\/PhoneGap is ready function\r\nfunction onDeviceReady() {\r\n\t$(window).unbind();\r\n\t$(window).bind('pageshow resize orientationchange', function(e){\r\n\t\tmax_height();\r\n\t});\r\n\tmax_height();\r\n\tgoogle.load("maps", "3.8", {"callback": map, other_params: "sensor=true&language=en"});\r\n}\r\n\r\nfunction max_height(){\r\n\tvar h = $('div[data-role="header"]').outerHeight(true);\r\n\tvar f = $('div[data-role="footer"]').outerHeight(true);\r\n\tvar w = $(window).height();\r\n\tvar c = $('div[data-role="content"]');\r\n\tvar c_h = c.height();\r\n\tvar c_oh = c.outerHeight(true);\r\n\tvar c_new = w - h - f - c_oh + c_h;\r\n\tvar total = h + f + c_oh;\r\n\tif(c_h<c.get(0).scrollHeight){\r\n\t\tc.height(c.get(0).scrollHeight);\r\n\t}else{\r\n\t\tc.height(c_new);\r\n\t}\r\n}\r\n\t\t\r\nfunction map(){\r\n var latlng = new google.maps.LatLng(55.17, 23.76);\r\n var myOptions = {\r\n zoom: 6,\r\n center: latlng,\r\n\t streetViewControl: true,\r\n mapTypeId: google.maps.MapTypeId.ROADMAP,\r\n zoomControl: true\r\n };\r\n map = new google.maps.Map(document.getElementById("map"), myOptions);\r\n\t\r\n\tgoogle.maps.event.addListenerOnce(map, 'tilesloaded', function(){\r\n\t\t\/\/get geoposition once\r\n\t\t\/\/navigator.geolocation.getCurrentPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true });\r\n\t\t\/\/watch for geoposition change\r\n\t\twatchID = navigator.geolocation.watchPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true }); \r\n\t}); \r\n}\r\n\r\nfunction geo_error(error){\r\n\t\/\/comment\r\n alert('code: ' + error.code + '\\n' + 'message: ' + error.message + '\\n');\r\n}\r\n\r\nfunction geo_success(position) {\r\n\t\r\n\tmap.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));\r\n\tmap.setZoom(15);\r\n\r\n var info = \r\n ('Latitude: ' + position.coords.latitude + '<br>' +\r\n 'Longitude: ' + position.coords.longitude + '<br>' +\r\n 'Altitude: ' + position.coords.altitude + '<br>' +\r\n 'Accuracy: ' + position.coords.accuracy + '<br>' +\r\n 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br>' +\r\n 'Heading: ' + position.coords.heading + '<br>' +\r\n 'Speed: ' + position.coords.speed + '<br>' +\r\n 'Timestamp: ' + new Date(position.timestamp));\r\n\r\n\tvar point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);\r\n\tif(!marker){\r\n\t\t\/\/create marker\r\n\t\tmarker = new google.maps.Marker({\r\n\t\t\tposition: point,\r\n\t\t\tmap: map\r\n\t\t});\r\n\t}else{\r\n\t\t\/\/move marker to new position\r\n\t\tmarker.setPosition(point);\r\n\t}\r\n\tif(!infowindow){\r\n\t\tinfowindow = new google.maps.InfoWindow({\r\n\t\t content: info\r\n\t\t});\r\n\t}else{\r\n\t\tinfowindow.setContent(info);\r\n\t}\r\n\tgoogle.maps.event.addListener(marker, 'click', function() {\r\n\t infowindow.open(map,marker);\r\n\t}); \r\n}\r\n<\/script>\r\n\r\n<\/head> \r\n<body> \r\n\r\n<div data-role="page" id="index">\r\n\t<div data-role="header" data-theme="b"><h1>Map Header<\/h1><\/div>\r\n\t<div data-role="content" style="padding:0;">\r\n\t\t<div id="map" style="width:100%;height:100%;"><\/div>\r\n\t<\/div>\r\n\t<div data-role="footer" data-theme="b"><h4>Map Footer<\/h4><\/div>\r\n<\/div>\r\n\r\n<\/html>\r\n<\/pre>\nDownload Map android application Eclipse project source map.7z<\/a>, project source with jquery mobile version 1.4.3 and multipage demo map3.7z<\/a>.<\/p>\n
Build Android Application from project source<\/strong>
\nFirst you will need Android SDK download and install from here developer.android.com\/sdk\/index.html<\/a>.
\nIf you install not ADT Bundle, the you need Eclipse IDE and ADT Plugin for Eclipse. For ADT Bundle just skip next downloads.
\nDownload and install Eclipse IDE for Java EE Developers www.eclipse.org\/downloads\/<\/a>
\nDownload and install ADT Plugin for Eclipse developer.android.com\/sdk\/eclipse-adt.html<\/a>.
\nNow you have powerful integrated environment in which you can build Android applications. <\/p>\nImport project files to Eclipse<\/strong>
\nDownload map.7z file and extract files with 7-Zip archiver www.7-zip.org<\/a>.
\nStart Eclipse.
\nSelect File -> Import... -> General -> Existing Projects into Workspace.
\nSelect root directory, browse for folder with extracted map.7z files.
\nPress Finish.<\/p>\nFix Android project properties<\/strong>
\nFrom Eclipce project pane right-click on Map project and select \"Android Tools -> Fix Project Properties\". You can skip this step if there is no errors with project.<\/p>\nCreate AVD<\/strong>
\nStart AVD (Android Virtual Device) Manager and create new android virtual device with platform version greater 2.2 and start device (or Eclipce will start it after building project)<\/p>\nBuild application<\/strong>
\nFrom Eclipse project pane right-click on imported Map project and select Run As -> Android Application. After a few seconds, the project is being built and installed to your android virtual device. Also you can test application in Chrome browser just open map\\assets\\www\\index.html file from localhost or other host because Chrome has a security restriction with disabled navigator for the file protocol.<\/p>\nAVD Geoposition<\/strong>
\nIf you see error message, then you need to set geoposition. Android virtual device don't emulate gps so you need to set manually geoposition via telnet. Open windows command line (for windows start -> run.. -> cmd), connect to your device and fix geo position. The port number can be seen in the title area of android emulator.<\/p>\n\r\ntelnet localhost 5554\r\ngeo fix 25.28 54.68\r\n<\/pre>\n
Installing APK Application on Android virtual device<\/strong>
\nOf course you can skip building and immediately install Map.apk file from bin folder. Then you will need Android SDK installed and start Android virtual device. Next start command line (for windows start -> run.. -> cmd) and install by command<\/p>\n\r\nC:\\progra~1\\Android\\android-sdk\\platform-tools\\adb.exe install Z:\\android\\project\\map\\bin\\Map.apk\r\n<\/pre>\n
change path for Map.apk where files are extracted.<\/p>\n
More information<\/strong>
\njQuery<\/a> JavaScript library
\njQuery Mobile<\/a> HTML5-based user interface system for all popular mobile device platforms
\nPhonegap get started guide for Android<\/a>
\nGoogle Maps API<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"This android geolocation application uses PhoneGap api for phone geo position and displays the phone position point on Google Maps. jQuery Mobile is used to display the page header, footer and content map. Page is … Continue reading
<\/a>\n\t\t\t<\/dt><\/dl>