how to show google map and get coordinates on device through javascript code?

Question

I did it in android but now i need to build app through phone-gap and i need to load map on the device and get current position coordinate(latitude and longitude) of the device.

So i need to have javascript code now and to be frank i am not much familiar with java script for now…Any code/help.

This is my code through which i am showing the map

Thanks

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key*****************&sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

In the place of "*" i am having my google api key..

Now i need to get the coordinates…

modified and currently using this code got from the link http://docs.phonegap.com/en/1.0.0/phonegap_geolocation_geolocation.md.html but even then i am getting this error "KCLErrorDomain Error 0"

<!DOCTYPE html>
<html>
<head>
    <title>Device Properties Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    <script type="text/javascript" charset="utf-8">

        document.addEventListener("deviceready", onDeviceReady, false);

        var watchID = null;


        function onDeviceReady() {

            var options = { frequency: 5000 };
            watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
        }


        function onSuccess(position) {
            var element = document.getElementById('geolocation');
            element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br />' +
            'Longitude: ' + position.coords.longitude     + '<br />' +
            '<hr />'      + element.innerHTML;
        }


        function onError(error) {
            alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
        }

        </script>
</head>
<body>
    <p id="geolocation">locating coordinates...</p>
</body>
</html>

I am not getting how to solve this error…using xcode 4.0.1 for phonegap apps development and trying to run on 4.3 simulator..

Answer 1

Here a quote from the PhoneGap documentation on Geolocation (http://docs.phonegap.com/en/1.0.0/phonegap_geolocation_geolocation.md.html):

Geolocation provides location information for the device, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. No guarantee is given that the API returns the device's actual location.

This API is based on the W3C Geo location API Specification. Some devices already provide an implementation of this spec. For those devices, the built-in support is used instead of replacing it with PhoneGap's implementation. For devices that don't have geolocation support, PhoneGap's implementation should be compatible with the W3C specification.

So basically, you can use the HTML5 Geolocation API without having to worry about any differences in PhoneGap. If you want to get the user's position once, use navigator.geolocation.getCurrentPosition() and if you want to periodically be sent the user's position, use navigator.geolocation.watchPosition() :

navigator.geolocation.watchPosition(locationSuccess, locationError, {timeout: 30000});

function locationSuccess(position)
{
    // this is your position as a LatLng object. use it however you need
    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
}

function locationError(err)
{
    if (err.code == 1)
        alert("You must allow this website to use the Geolocation API to access your position.");
    else if (err.code == 3)
        alert("Unfortunately, your position request timed out.");
    else
        alert("Unfortunately, your position could not be determined.");
}

how to show google map and get coordinates on device through javascript code?

Question

1 answers

solution1
1 ACCPTED 2012-07-06 16:33:20

how to show google map and get coordinates on device through javascript code?

Question

1 answers

solution1 1 ACCPTED 2012-07-06 16:33:20

solution1
1 ACCPTED 2012-07-06 16:33:20