uiGmapgoogle-maps example with markers

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
    <script src="http://rawgit.com/angular-ui/angular-google-maps/2.2.X/dist/angular-google-maps.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
<div ng-app="dogMap" ng-controller="MapCtrl">
  <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" 
                      options="options" bounds="map.bounds" control="googlemap">
      <ui-gmap-window show="show" coords='windowCoords' closeClick="closeClick()">
            <div>{{Name}}</div>
      </ui-gmap-window>                
      <ui-gmap-markers models="markers" coords="'self'" icon="'icon'" 
                       options="'options'" doRebuildAll="true" click="onClick">
      </ui-gmap-markers>
  </ui-gmap-google-map>
</div>
  </body>

</html>

angular.module('dogMap', ['uiGmapgoogle-maps'])
    .controller('MapCtrl', function($scope, uiGmapGoogleMapApi,uiGmapIsReady) {
      uiGmapGoogleMapApi.then(function(maps) {
        var places = genaratePlaces(100);

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

        function assignMarkersToMap() {
          markers = [];
          for (var i=0; i < places.length; i++) {
            markers.push({
              latitude: places[i].latitude,
              longitude: places[i].longitude,
              title: places[i].name,
              id: places[i].id,
            });
          };
          return markers;
        };

        $scope.markers = [];
        
        
        uiGmapIsReady.promise()                    
        .then(function(instances) {           
           $scope.markers = assignMarkersToMap();
        });
 

        $scope.windowCoords = {};

        $scope.onClick = function(marker, eventName, model) {
            //$scope.map.center.latitude = model.latitude;
            //$scope.map.center.longitude = model.longitude;
            //$scope.map.zoom = 11;
            $scope.windowCoords.latitude = model.latitude;
            $scope.windowCoords.longitude = model.longitude;
            $scope.Name = model.title;
            $scope.show = true;
        };

        $scope.closeClick = function() {
            $scope.show = false;
        };

        $scope.options = {
          scrollwheel: false
        };

        $scope.show = false;

      });
    });


function genaratePlaces(count){
    var vals = [];
    for(var i = 0; i < count; i++) {
        vals.push({
            latitude: getRandomArbitrary(33.192528,48.209871),
            longitude: getRandomArbitrary(-118.586462,-81.716346),
            id: i,
            name: 'Place #' + i     
        });     
    }
    return vals;    
}    


function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

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