{"id":526,"date":"2012-03-23T09:51:27","date_gmt":"2012-03-23T16:51:27","guid":{"rendered":"http:\/\/zsprawl.com\/iOS\/?p=526"},"modified":"2012-03-23T09:51:27","modified_gmt":"2012-03-23T16:51:27","slug":"using-phonegap-with-google-maps","status":"publish","type":"post","link":"http:\/\/zsprawl.com\/iOS\/2012\/03\/using-phonegap-with-google-maps\/","title":{"rendered":"Using PhoneGap with Google Maps"},"content":{"rendered":"<p>In order for a Web-based App to access the GPS within your iPhone or Android device, you need to access the PhoneGap API layer. PhoneGap has done much of the dirty work for you, and all you need to do is call the plugin to get longitude and latitude values like so:<\/p>\n<p><code>navigator.geolocation.getCurrentPosition(win, fail);<\/code><\/p>\n<p>After you do that, you just plug the values into the Google Maps API v3. In the code above, if you successfully retrieve coordinates, the win() function will be called. If not, obviously the fail() function will be called. Here are those two functions bundled together.<\/p>\n<p><code><\/p>\n<pre>function checkLocation() {\r\n    var win = function(position) {\r\n        var lat = position.coords.latitude;\r\n        var long = position.coords.longitude;\r\n        var myLatlng = new google.maps.LatLng(lat, long);\r\n\r\n        var myOptions = {\r\n            center: myLatlng,\r\n            zoom: 16,\r\n            mapTypeId: google.maps.MapTypeId.HYBRID\r\n        };\r\n        map_element = document.getElementById(\"map_canvas\");\r\n        map = new google.maps.Map(map_element, myOptions);\r\n    };\r\n\r\n    var fail = function(e) {\r\n        $.mobile.hidePageLoadingMsg();\r\n        alert('Can\\'t retrieve position.\\nError: ' + e);\r\n    };\r\n\r\n    watchID = navigator.geolocation.getCurrentPosition(win, fail);\r\n} <\/pre>\n<p><\/code><\/p>\n<p>And that is pretty much it! You can customize some of the map properties, like playing with the zoom values between 1 and 18. Oh and the map_canvas is just a plain HTML div tag.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In order for a Web-based App to access the GPS within your iPhone or Android device, you need to access the PhoneGap API layer. PhoneGap has done much of the dirty work for you, and all you need to do is call the plugin to get longitude and latitude values like so: navigator.geolocation.getCurrentPosition(win, fail); After <a href=\"http:\/\/zsprawl.com\/iOS\/2012\/03\/using-phonegap-with-google-maps\/#more-'\" class=\"more-link\"><br \/>more \u00bb<\/a><\/p>\n","protected":false},"author":318,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,3],"tags":[9,35,34],"class_list":["post-526","post","type-post","status-publish","format-standard","hentry","category-blog","category-ios-development","tag-development","tag-google-maps","tag-phonegap"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/526"}],"collection":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/users\/318"}],"replies":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/comments?post=526"}],"version-history":[{"count":6,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/526\/revisions"}],"predecessor-version":[{"id":532,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/526\/revisions\/532"}],"wp:attachment":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/media?parent=526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/categories?post=526"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/tags?post=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}