dsMap (angular direction service) example

by Jessel John

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&quot;"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://rawgit.com/JesselJohn/angular-direction-service/master/src/dsMapService.js"></script>
<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...

CSS

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

JavaScript

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
  };
}]);