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