angular-google-maps bounds directive

by Eric Czajkowski

HTML

<script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/index.js"></script>
<script src="https://cdn.rawgit.com/lodash/lodash/3.10.1/lodash.min.js"></script>
<script src="https://rawgit.com/eczajk1/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<div ng-app="mapsApp">
  <ul ng-controller="AnotherCtrl as a">
    <li ng-repeat="place in a.places">
      <a href ng-click=a.setBounds(place)>{{place}}</a>
    </li>
  </ul>
  
  <hr>

  <div ng-controller="MapCtrl as m">

    <b>Bounds:</b>
    <pre>{{m.bounds | json}}</pre>
    
    <b>Extent:</b>
    <pre>{{m.extent | json}}</pre>
    <ui-gmap-google-map id="google.map" class="google" center='m.defaults.center' zoom='m.defaults.zoom' options='m.defaults.options' type='HYBRID' refresh="m.refresh" bounds="m.bounds" extent="m.extent"></ui-gmap-google-map>
  </div>
</div>

CSS

.angular-google-map-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 250px;
  right: 0;
}

JavaScript

//Angular App Module and Controller
  angular.module('mapsApp', ['uiGmapgoogle-maps'])
    .service('boundsService', function() {
      return {
        bounds: {},
        setBounds: function(newBounds) {
          angular.copy(newBounds, this.bounds);
        }
      };
    })
    .controller('MapCtrl', function(mapDefaults, boundsService) {
      this.defaults = mapDefaults;
      this.bounds = boundsService.bounds;
      this.extent = {};
    })
    .controller('AnotherCtrl', function(places, boundsService) {
      this.places = Object.keys(places).map(function(k) {
        return k;
      });
      this.setBounds = function(place) {
        var newBounds = places[place];
        console.log(newBounds);
        boundsService.setBounds(newBounds);
      };
    })
    .constant('places', {
      maryland: {
        northeast: {
          latitude: 39.737,
          longitude: -75.014
        },
        southwest: {
          latitude: 37.957,
          longitude: -79.519
        }
      },
      azerbaijan: {
        northeast: {
          latitude: 42.000,
          longitude: 50.603
        },
        southwest: {
          latitude: 38.243,
          longitude: 44.747
        }
      },
      africa: {
        northeast: {
          latitude: 39.105,
          longitude: 54.926
        },
        southwest: {
          latitude: -36.304,
          longitude: -19.956
        }
      }
    })
    .constant('mapDefaults', {
      center: {
        latitude: 39.2,
        longitude: -76.4
      },
      zoom: 7,
      options: {
        minZoom: 1,
        maxZoom: 22,
      }
    });