Support for asynchronous map loading

[asennoussi]

I'm adding the map asynchronously, therefore I have the google is not defined error. Can you do it with javascript promises ?

[arathael]

+1, don't know about proposed promises solution, but I also load gmaps async. What to do?

[rubenCodeforges]

A solution might be to use the Google Maps SDK Async Loader.

.config(function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        //    key: 'your api key',
        v: '3.20', //defaults to latest 3.X anyhow
        libraries: 'weather,geometry,visualization'
    });

When ready:

.controller("someController", function($scope, uiGmapGoogleMapApi) {
    uiGmapGoogleMapApi.then(function(maps) {
     // write your code here
     // (google is defined)
    });

[thematan]

ruben has a direction. you should add (or switch with weather..) 'places' to the provider config. like so:

config(function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        //    key: 'your api key',
        v: '3.20', //defaults to latest 3.X anyhow
        libraries: 'places,geometry,visualization'
    });

then, in the controller do this:

.controller("someController", function($scope, $window, uiGmapGoogleMapApi) {
    uiGmapGoogleMapApi.then(function(maps) {
     $window.google = google
     // (google is defined)
    });

and in order to avoid errors because the template with the ngAutocomplete directive is loaded before the uiGmapGoogleMapApi is resolved it should be wrapped in ng-if. (don't forget to save a ref to the $window on the scope on the link (or controller i guess) function of the directive where the ngAutocomplete directive is placed (ng-if matches only properties on the scope)

.directive('directiveWithAutocomplete', function($window){
    return {
          link: (scope){
                    scope.window = $window;
                }
        }
}

<div directiveWithAutocomplete ng-if="window.google">
       <div ngAutoComplete>
</div>

[maximevast]

@thematan Your solution seems to be what I'm looking for but unfortunately it's not working to me... Could you help me ?

Here my code, what dit I missed ?

app.js :

config(function(uiGmapGoogleMapApiProvider) { uiGmapGoogleMapApiProvider.configure({ key: "my key", v: "3.20", libraries: "places,geometry,visualization" });

controller :

uiGmapGoogleMapApi.then(function(maps) { $window.google = google; console.log(google); });

directive :

.directive("directiveWithAutocomplete", function($window){ return { restrict: "A", link: function(scope){ scope.window = $window; } } })

view :

`

`

But nothing shows up, and if I remove the ng-if, the "google is not defined" error appears. As if uiGmapGoogleMapApi is never resolved...

Thank you for your time !

[thematan]

@MathersMax have you checked the network traffic to see the result for the loading request from google?

1. comment or provide valid key to the "key: " attribute in the configuration (where it is "my key" now).
2. move the scope.window = $window to .run() and place it on $rootscope (so you will be able to use it elsewhere)
3. maybe get rid of the "v: 3.20" (unless it is of importance for you) in the config

[maximevast]

Hi ! Moving $rootscope.window = $window to .run() did the trick ! Thanks a lot.

I'm facing a new issue that I can't figure out. The 'details' and 'ng-model' values are updated in the view but not in the controller. Do you know what to do ?

Thanks you for your time !

[rubenCodeforges]

@MathersMax how do you check for them to be changed ? Can you paste your code example ?

[maximevast]

I tried many ways :

$scope.$watch('autocompleteResult', function(result, res){
        console.log(result)
        console.log(res)
    });

of even with ng-change="showNameChanged()"

  $scope.showNameChanged = function() {
        console.log("yolo");
        console.log($scope.autocompleteResult);
    }

Here s the declaration of my autocomplete object :

 uiGmapGoogleMapApi.then(function(maps) {
        // Restrict autocomplete to choosen town
        var latlng = new google.maps.LatLng(chosenTown.lat, chosenTown.lng);
        var bounds = new google.maps.LatLngBounds(latlng);

        $scope.autocompleteResult = "";
        $scope.autocompleteDetails = "";
        $scope.autocompleteOptions = {
            bounds: bounds
        };

    });

and my view :

<div ng-if="window.google">

        <div flex="33" class="sleeping_adress">
            <p>Where are you sleeping ?</p>
            <p>(type in the adress/adresses here)</p>
            <md-input-container>
                <label></label>
                <input type="text" id="sleeping_adress" class="form-control" ng-autocomplete ng-model="autocompleteResult" ng-change="showNameChanged()" options="autocompleteOptions" details="autocompleteDetails"/>
            </md-input-container>
            <p ng-click="proposeBooking()">DON'T KNOW WHERE TO SLEEP ?</p>
        </div>
    {{autocompleteDetails.formatted_address}}<br/>
    {{autocompleteResult}}
    </div>

[maximevast]

I finally find it by myself ! When using ng-model, you need to bind your value in an object to have a dot when calling it :

http://stackoverflow.com/questions/30818588/angularjs-model-not-updating-in-controller-scope

Thanks for your time, I hope this will help !