angular-google-maps - "_contains is not a function" in chrome

Question

I'm trying to use angular-google-maps but it breaks in chrome with the error

TypeError: _.contains is not a function

My DOM element looks like

<div id="dashboard_map" class="tab-pane fade in active" ng-controller="mapsCtrl" ng-init="url = '/api/companies'; initialise();">
  <div class="panel panel-default"  ng-hide="!custom">
    <div class="panel-heading row">
      <div class="col-md-5">
        {!! Lang::get('google_maps.map1.title') !!}
      </div>
    <div class="col-md-2 col-md-offset-5">
      <i class="filter glyphicon glyphicon-filter pull-right" ng-click="custom=!custom"></i>
    </div>
  </div>
  <div class="panel-body">
    <div id="map_canvas">
        <ui-gmap-google-map center='map.center' zoom='map.zoom'>
        </ui-gmap-google-map>
    </div>
  </div>
</div>  

and I am loading gmap3, gmap3menu, lodash, angularjs, angular-resource, angular-simple-logger and finally angular-google-maps in that order. My controller contains the following $scope property

$scope.map = {center: {latitude: 40.1451, longitude: -99.6680 }, zoom: 4 };

The map is displayed but I cannot get rid of the error.

Any ideas/advice are greatly appreciated.

Answer 1

Installing angular-google-maps via bower resolves(in my case) lodash to version 4. Aparently from version 3.* to 4 changes 'contains' for 'includes' and 'object' for 'zipObject'. As indicated here i solved with:

uiGmapGoogleMapApi.then(function(maps) {
      if( typeof _.contains === 'undefined' ) {
        _.contains = _.includes;
      }
      if( typeof _.object === 'undefined' ) {
        _.object = _.zipObject;
      }
      $scope.map = {..map stuff}
})

Sorry for the bad english, please edit to correct