searchBox: the events property is required

[gerbsen]

Hi, I'm seeing this issue only after I build my application. If I run this with "grunt serve" everything works as expected:

<ui-gmap-google-map center='sPSController.map.center' zoom='sPSController.map.zoom' options='sPSController.map.options' events="sPSController.map.events">
        <!-- <ui-gmap-search-box  template="searchbox.tpl.html" evets="{}" ng-model="searchbox.model" options='{}'></ui-gmap-search-box> -->
        <ui-gmap-search-box  template="searchbox.template" events="searchbox.events" ng-model="searchbox.model" ooptions='searchbox.options'></ui-gmap-search-box>
        <ui-gmap-marker coords="sPSController.coordinates" idkey="1"></ui-gmap-marker>
        <ui-gmap-map-control template="control.tpl.html" position="top-right" controller="MapLayerController" index="-1"></ui-gmap-map-control>
</ui-gmap-google-map>

$scope.searchbox = { 
    model : "",
    template : 'searchbox.tpl.html',
    options: {
          autocomplete:true,
          componentRestrictions: {country: 'ch'}
     },
     events : {
          places_changed : function (searchbox) {
                vm.place = searchbox.getPlaces()[0];
                vm.coordinates = { latitude : vm.place.geometry.location.lat(), longitude : vm.place.geometry.location.lng()  }
          }
     }
};

Anybody seen something like this? Thanks, Daniel

[m-kharbat]

i'm having the same error. But for the record you have a typo ooptions='searchbox.options'

[m-kharbat]

it works for me after i remove $scope.searchbox={...} from this block : uiGmapGoogleMapApi.then(function(maps) {..};

[gerbsen]

Could you paste your complete example?

[gerbsen]

The strange thing was that the same map rendered correctly in another view. So I commented everything, starting only from the map, which worked. I then worked my way up until everything was uncommented again. Problem is I don't really know what was the issue. I typically don't use $scope, but for know I switched back to using scope and declaring scope variables.

[m-kharbat]

if you are defining $scope.searchbox = {..} after you load the google maps sdk in your controller uiGmapGoogleMapApi.then(function(maps){ .. }); you will run into this issue. Because before the sdk is loaded, you will be sending an empty/undefined object ($scope.searchbox) to the directive "ui-gmap-search-box"

This was my problem anyway..

[david-meza]

You typed evets="{}" instead of events="{}"

[m-kharbat]

that's not the problem it seems.. that line is a comment, in the second line he types it correctly <!-- <ui-gmap-search-box template="searchbox.tpl.html" evets="{}" ng-model="searchbox.model" options='{}'></ui-gmap-search-box> -->

<ui-gmap-search-box template="searchbox.template" events="searchbox.events" ng-model="searchbox.model" ooptions='searchbox.options'></ui-gmap-search-box>

[david-meza]

If you read his comment he says it works just fine when he uses $scope, meaning that the second search-box example is not an issue. It works. The reason why the commented example does not work is because of the typo.

The strange thing was that the same map rendered correctly in another view. So I commented everything, starting only from the map, which worked. I then worked my way up until everything was uncommented again. Problem is I don't really know what was the issue. I typically don't use $scope, but for know I switched back to using scope and declaring scope variables.

[nmccready]

@m-kharbat

if you are defining $scope.searchbox = {..} after you load the google maps sdk in your controller uiGmapGoogleMapApi.then(function(maps){ .. }); you will run into this issue. Because before the sdk is loaded, you will be sending an empty/undefined object ($scope.searchbox) to the directive "ui-gmap-search-box"

Sounds like a missing watch needs to be added. Should be a simple enough PR by anybody.

[bogomips]

Hi guys, I've got this error writing a custom directive even if i declared $scope.searhbox out of uiGmapGoogleMapApi.then(function(maps){ .. }); The first time everything works well, if i change route and I return back to the same page, the error occurs. Do you have any suggestion?

[bogomips]

It seems i solved with an ng-if. '<ui-gmap-google-map ng-if="searchbox.events" .................

[jacquesdev]

@bogomips - worked for me as well, thanks! Would be great to know why that specifically fixed the issue, do you have any idea?

[bogomips]

Yes I do. When the directive runs, it needs scope.searchbox.events ready. What happens is that the directive is rendered before the controller fills scope.searchbox.events. using ng-if you are telling to the directive to run only after scope.searchbox.events is not null. ps you are welcome :)

[dcalde]

Thanks @bogomips. That did the trick.