Google Maps API with AngularJS

This is just a small snippet of how AngularJS can be used with Google Maps in quite a powerful way.

by Suvi Vignarajah

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<section ng-app="mapsApp" ng-controller="MapsCtrl">
  <div id="side-panel" class="col-md-4">
    <div class="page-header">
      <h1>Google Maps API with AngularJS <small>A small sample of binding markers in Google Maps the external links using AngularJS</small></h1>
    </div>

    <table class="table table-hover" ng-show="cities">
      <thead>
        <tr>
          <th>City</th>
          <th>Team Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="city in cities | orderBy : 'name'" ng-click="openInfoWindow($event, city)" class="city">
          <td>{{city.name}}</td>
          <td>{{city.team}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="map" class="col-md-8"></div>
</section>

CSS

html,
body,
section,
#map,
#side-panel {
  height: 100%;
}

#side-panel {
  overflow-y: auto;
}

.city {
  cursor: pointer;
}

JavaScript

//Data
var cities = [{
  name: 'Toronto',
  team: 'Maple Leafs',
  lat: 43.643156,
  long: -79.379614
}, {
  name: 'New York',
  team: 'Rangers',
  lat: 40.750524,
  long: -73.993352
}, {
  name: 'Chicago',
  team: 'Blackhawks',
  lat: 41.881017,
  long: -87.674142
}, {
  name: 'Los Angeles',
  team: 'Kings',
  lat: 34.043076,
  long: -118.26701
}, {
  name: 'Boston',
  team: 'Bruins',
  lat: 42.365346,
  long: -71.062385
}, {
  name: 'Buffalo',
  team: 'Sabres',
  lat: 42.875036,
  long: -78.87611
}, {
  name: 'Detroit',
  team: 'Red Wings',
  lat: 42.325174,
  long: -83.051322
}, {
  name: 'Florida',
  team: 'Panthers',
  lat: 26.159598,
  long: -80.325469
}, {
  name: 'Montreal',
  team: 'Canadiens',
  lat: 45.496331,
  long: -73.570035
}, {
  name: 'Ottawa',
  team: 'Senators',
  lat: 43.251986,
  long: -79.806622
}, {
  name: 'Tampa Bay',
  team: 'Lightning',
  lat: 27.94274,
  long: -82.451709
}, {
  name: 'Carolina',
  team: 'Hurricanes',
  lat: 35.80344,
  long: -78.721894
}, {
  name: 'Columbus',
  team: 'Blue Jackets',
  lat: 39.969276,
  long: -83.006004
}, {
  name: 'New Jersey',
  team: 'Devils',
  lat: 40.733438,
  long: -74.171025
}, {
  name: 'New York',
  team: 'Islanders',
  lat: 40.722998,
  long: -73.590721
}, {
  name: 'Philadelphia',
  team: 'Flyers',
  lat: 39.901243,
  long: -75.171897
}, {
  name: 'Pittsburgh',
  team: 'Penguins',
  lat: 40.439174,
  long: -79.98972
}, {
  name: 'Washington',
  team: 'Capitals',
  lat: 38.898014,
  long: -77.020901
}, {
  name: 'Anaheim',
  team: 'Ducks',
  lat: 33.807804,
  long: -117.876481
}, {
  name: 'Calgary',
  team: 'Flames',
  lat: 51.037427,
  long: -114.051994
}, {
  name: 'Edmonton',
  team: 'Oilers',
  lat: 53.572174,
  long: -113.455192
}, {
  name: 'Phoenix',
  team: 'Coyotes',
  lat: 33.531987,
  long: -112.261158
}, {
  name: 'San Jose',
  team: 'Sharks',
  lat: 37.332802,
  long: -121.901171
}, {
  name: 'Vancouver',
  team: 'Canucks',
  lat: 49.277689,
  long: -123.108076
}, {
  name:...