Angular google maps search-box directive : events don't fire when trying to restrict the search (with autocomplete option)

Question

I'm using Angular Google Maps to get a map with a searchbox in it.

I'm trying to restrict the search to 'address' and to a country (France), so I'd like to use the 'Autocomplete' option of the search-box directive, as specified in the documentation.

The problem is that the autocomplete:true bit in my code does effectively restrict the search, but it prevents the events from firing (the map and the marker don't get updated). But there is no error in the console.

However, if I comment out or remove autocomplete:true, then the events fire (the map and the marker are refreshed), but then the search isn't restricted to France and addresses...

Here is my code :

        var events = {
            places_changed:function (searchBox) {
                var place = searchBox.getPlaces();
                if (!place || place == 'undefined' || place.length == 0) {
                    console.log('no place data :(');
                    return;
                }

                // refresh the map
                $scope.map = {
                    center:{
                        latitude:place[0].geometry.location.lat(),
                        longitude:place[0].geometry.location.lng()
                    },
                    zoom:10
                };

                // refresh the marker
                $scope.marker = {
                    id:0,
                    options:{ draggable:false },
                    coords:{
                        latitude:place[0].geometry.location.lat(),
                        longitude:place[0].geometry.location.lng()
                    }
                };

            }
        };

        $scope.searchbox = {
            template:'searchbox.tpl.html',
            events:events,
            options:{
                autocomplete:true,
                types:['address'],
                componentRestrictions:{
                    country:'fr'
                }
            }
        };

And in the html file :

    <div style="height: 500px;">
        <script type="text/ng-template" id="searchbox.tpl.html">
            <input type="text"
                   placeholder="{{'searchbox.google.maps' | text}}"
                   style="width:270px; height:30px;">
        </script>

        <ui-gmap-google-map center='map.center' zoom='map.zoom'>

            <!--SEARCHBOX-->
            <ui-gmap-search-box template="searchbox.template"
                                events="searchbox.events"
                                position="BOTTOM_RIGHT"
                                options="searchbox.options"></ui-gmap-search-box>
            <!--MARKER-->
            <ui-gmap-marker coords="marker.coords" 
                            options="marker.options" 
                            events="marker.events"
                            idkey="marker.id">
            </ui-gmap-marker>

        </ui-gmap-google-map>

    </div>

What am I doing wrong ? Is there a way to get the restrictions on the search AND the events fired ?

Thank you in advance !

Answer 1

OK, I figured it out, so I answer my own question, in case someone else gets stuck !

If autocomplete:true , then it's not places_changed and searchBox.getPlaces() , but it's place_changed and searchBox.getPlace() . And we don't get an array of places, but just one place.

Here is a working code :

  var events = {
        place_changed:function (searchBox) {
            var place = searchBox.getPlace();
            if (!place || place == 'undefined') {
                console.log('no place data :(');
                return;
            }

            // refresh the map
            $scope.map = {
                center:{
                    latitude:place.geometry.location.lat(),
                    longitude:place.geometry.location.lng()
                },
                zoom:10
            };

            // refresh the marker
            $scope.marker = {
                id:0,
                options:{ draggable:false },
                coords:{
                    latitude:place.geometry.location.lat(),
                    longitude:place.geometry.location.lng()
                }
            };

        }
    };