0

I know there are a ton of support forums, but it seems that no one quite has the answer that I'm searching for. So, in detail, the below is my scenario (I am developing in ionic frame).

I am using ngCordova cordova-plugin-geolocation to obtain my current location (this works fine):

function initialize(){
var posOptions = {timeout: 10000, enableHighAccuracy: false};

$cordovaGeolocation.getCurrentPosition(posOptions)
  .then(function(pos){
    var lat=pos.coords.latitude;
    var lng=pos.coords.longitude;
    var myLatlng = new google.maps.LatLng(lat,lng);
    initMap(myLatlng);
  }, function(err){
});}

I have verified that with the above code that vars lat,lng are populated with correct values. So, next thing I want to do is render my google maps to be displayed, I do so via initMap function below:

function initMap(origin){
var mapOptions = {
  center: origin,
  zoom: 16,
};
$scope.map=new google.maps.Map(document.getElementById("map"),mapOptions);}

When I attempt to render this image, I receive only a blank screen. Also, I have 'ionic.Platform.ready(initialize);' in my controller code.

NOTE: The below is a code segment in my html template:

<div id="map" ng-controller="MapCtrl">
</div>

Some failed coding attempts include:

  1. using ng-init() as opposed to ionic.Platform.ready - same blank image
  2. taking everything out of function (desperate attempt) - same blank image

Successful when:

I call initMap directly with latlong google object, completely bypassing the "getCurrentPosition" operation, which is nested in the initialize() function.

Any recommendations will be really appreciated.

LostJon
  • 2,287
  • 11
  • 20
  • http://codepen.io/ionic/pen/uzngt This should help you – Paresh Gami Feb 15 '16 at 06:42
  • This was one of the links I had used...this doesnt help me because the $cordovaGeolocation.getCurrentPosition() isnt used in this example. I can get this working IF the getCurrentPosition() function isnt used. – LostJon Feb 15 '16 at 13:19
  • FYI, I have posted this issue in more detail to another forum: https://forum.ionicframework.com/t/ngcordova-getcurrentposition-with-google-maps-api/44153 – LostJon Feb 19 '16 at 14:07
  • have you solved that or not? – Paresh Gami Feb 20 '16 at 02:21
  • I just found out this morning...It requires the use of $q.defer to make promises to get data and return it asynchronously. I will post this as the answer here if you are interested! – LostJon Feb 20 '16 at 02:23
  • yah sure you can post answer to your question. it is helpful for me and other also – Paresh Gami Feb 20 '16 at 02:24

1 Answers1

0

So, the issue with my initial logic was that executing getCurrentPosition is an asynchronous call, meaning it will receive its data after the DOM is fully loaded. so, In order to fix this, I use $q.defer() to create a promise object to be accessed later. more information on how to do this can be found on another forum I posted to:

https://forum.ionicframework.com/t/ngcordova-getcurrentposition-with-google-maps-api/44153

Good luck and happy coding!

LostJon
  • 2,287
  • 11
  • 20