Edit in JSFiddle

var app = angular.module('map', ['ds.map', 'ui.bootstrap']);

app.controller('mapCtrl', ['$scope', function($scope) {
	// UI-Bootstrap Settings
  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
  
  // Model object to be passed to "ds-map-view" directive as "map-settings"
  $scope.mapObject = {
    center: {
      lat: 12.94206,
      lng: 77.62229
    },
    zoom: 15,
    disableDefaultUI: true,
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
    },
    scrollwheel: false
  };

	// Model object to be passed to "ds-map-places" directive as "options"
  $scope.placesOptions = {
    preserveViewport: true,
    suppressMarkers: true
  };
}]);

<div ng-app="map" ng-controller="mapCtrl">
  <!-- start:dsMap HTML -->
  <ds-map class="map-wrap clearfix">
    <ds-map-view class="moreinfo__map map" map-settings="mapObject" origin-options="{icon:'http://www.mourneshuttle.co.uk/images/mapicon-c2.jpg'}" destination-options="{icon:'http://www.mourneshuttle.co.uk/images/mapicon-c2.jpg'}"></ds-map-view>
    <ds-map-places options="placesOptions">
      <ds-group>
        <!--<div ng-click="setDirections()">Show Direction</div>-->
        <div class="moreinfo__commute">
          <label>NEARBY PLACES</label>
          <uib-tabset class="commute-tabs">
            <uib-tab>
              <uib-tab-heading ng-click="toggleGroupVisibility('Transportation')"><i class="fa fa-car"></i> Transportation</uib-tab-heading>
              <ds-places-type group="Transportation" types="{'bus_station':1,'airport':2,'train_station':2}" options="{icon:'http://www.mourneshuttle.co.uk/images/mapicon-c2.jpg'}"></ds-places-type>
            </uib-tab>
            <uib-tab>
              <uib-tab-heading ng-click="toggleGroupVisibility('Restaurants and Bars')"><i class="fa fa-cutlery"></i> Restaurants and bars</uib-tab-heading>
              <ds-places-type group="Restaurants and Bars" types="['restaurant']" options="{visible:false,icon:'http://www.mourneshuttle.co.uk/images/mapicon-c2.jpg'}"></ds-places-type>
            </uib-tab>
            <uib-tab>
              <uib-tab-heading ng-click="toggleGroupVisibility('Schools/Colleges')"><i class="fa fa-bank"></i> Schools/Colleges</uib-tab-heading>
              <ds-places-type group="Schools/Colleges" types="{'university':3,'school':2}" options="{visible:false}"></ds-places-type>
            </uib-tab>
            <uib-tab>
              <uib-tab-heading ng-click="toggleGroupVisibility('Gardens and Recreation')"><i class="fa fa-futbol-o"></i> Gardens and Recreation</uib-tab-heading>
              <ds-places-type group="Gardens and Recreation" types="{'amusement_park':2,'art_gallery':1,'zoo':1,'museum':1}" options="{visible:false}"></ds-places-type>
            </uib-tab>
            <uib-tab>
              <uib-tab-heading ng-click="toggleGroupVisibility('Movie Halls')"><i class="fa fa-video-camera"></i> Movie Halls</uib-tab-heading>
              <ds-places-type group="Movie Halls" types="['movies']" sort-option="radius" radius="5000" options="{visible:false}"></ds-places-type>
            </uib-tab>
            <uib-tab>
              <uib-tab-heading ng-click="toggleGroupVisibility('ATMs')"><i class="fa fa-credit-card"></i> ATMs</uib-tab-heading>
              <ds-places-type group="ATMs" types="['atm']" options="{visible:false}"></ds-places-type>
            </uib-tab>
            <uib-tab>
              <uib-tab-heading ng-click="toggleGroupVisibility('Gas Stations')"><i class="fa fa-tint"></i> Gas Stations</uib-tab-heading>
              <ds-places-type group="Gas Stations" types="['gas_station']" options="{visible:false}"></ds-places-type>
            </uib-tab>
          </uib-tabset>
        </div>
      </ds-group>
    </ds-map-places>
  </ds-map>
  <!-- end:dsMap HTML -->
  <!-- start:Places Service Template -->
  <script type="text/ng-template" id="dsMapPlaces.html">
    <div>
      <div class="commute__item" ng-repeat="place in Places | limitTo:5" ng-mouseover="showDirection()" ds-each-place>
        <label ng-bind="place.name"></label>
        <span ng-bind="place.distance + ' km'"></span>
        <div><i class="car-icon-grey"></i><span ng-bind="place.duration+ ' min'"></span></div>
      </div>
    </div>
  </script>
  <!-- end:Places Service Template -->
</div>

.map {
  width: 100%;
  height: 300px;
}