Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Blog » Using PhoneGap with Google Maps

Using PhoneGap with Google Maps

Published on March 23rd, 2012

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 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.

function checkLocation() {
    var win = function(position) {
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        var myLatlng = new google.maps.LatLng(lat, long);

        var myOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        map_element = document.getElementById("map_canvas");
        map = new google.maps.Map(map_element, myOptions);
    };

    var fail = function(e) {
        $.mobile.hidePageLoadingMsg();
        alert('Can\'t retrieve position.\nError: ' + e);
    };

    watchID = navigator.geolocation.getCurrentPosition(win, fail);
} 

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.

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.

 

16 Responses to “Using PhoneGap with Google Maps”

  1. This helped so much. I was stupidly trying to use Google’s API v2 instead of v3… so much easier!!

  2. Hi Sprawl

    Great site!

    If you are using just jquerymobile and not phonegap – have you seen any tutorials on how you can use geolocation to show a users location which you could then plot on a google map with directions to the business address – which would be perfect for a mobile app – as you are likely to use this feature when you are lost in a city and are trying to find the business location.

  3. I do believe all of the concepts you’ve offered on your post. They are very convincing and can certainly work. Nonetheless, the posts are very short for starters. May just you please prolong them a bit from subsequent time? Thanks for the post.

  4. Thank you for every other magnificent post. The place else may just anyone get that kind of information in such an ideal manner of writing? I’ve a presentation subsequent week, and I am on the look for such info.

  5. Thanks for sharing your opinions and thoughts this is great article!

  6. Thanks again for publishing this to help others.

    I’m getting the error “ReferenceError: can’t find variable Google”. I assume this is because I’ve not included a script reference to the Google Javascript API. I did not include this because I was under the impression Phonegap sorts that all out for you and besides, the Google docs state you need to put your API key in the string (which I don’t have – I thought that was no longer necessary on an iPhone?). In addition, I didn’t really want my app to have to reference a remote API every time it loads (as the user won’t always want to load the map).

  7. hi, would there be a way to implement this where a click on the map passed the coordinates instead of geolocation?

    thanks

  8. Hi Sir,

    If we use google map api’s then we have to pay for them it seems… Is it true?

    Best regards,
    praveen

Leave a Reply

© 2012 zSprawl's zApps