CODEWITHSUNDEEP
androidcordova
Druidys
Druidys

Reputation: 81

Phonegap my geolocation on google maps

I am using cordova 2.0.0 and i am testing on android 2.2 I want to make an app which gets my geolocation and shows it in google maps. Now i tried my code and when i run it, it shows my coördinates but it doesn't show a map when i clicked ok.

These are my permissions: 

<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
<access origin="http://google.com*" />
<access origin="http://maps.google.com*" /> 
<access origin="https://google.com*"/>
<access origin="https://maps.google.com*"/>

If anyone could tell me what i did wrong i would greatly appreciate it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

     <head>

<meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Beer Me</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">

function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':10000});

}

//GEOLOCATION
var onSuccess = function(position) {
    alert('Latitude: '  + position.coords.latitude   + '\n' +
          'Longitude: ' + position.coords.longitude  + '\n');

    var myLat = position.coords.latitude;
    var myLong = position.coords.longitude;

    //MAP
    var mapOptions = {
        center: new google.maps.LatLng(myLat, myLong),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  mapOptions);

};

// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}


     </script>
     </head>
     <body onload="onLoad()"> 
     <div id="map_canvas" style="width:100%; height:100%"></div>
     </body>
     </html>

Upvotes: 2

Views: 3656

Answers (1)

Kimo_do
Kimo_do

Reputation: 1028

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Try this src , it works for me with your same code !

Upvotes: 1

Related Questions