Demo of map zoom too close on single marker. angular-google-maps v2.2.1 angular 1.4.6

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div ng-app="app" ng-controller="mapController as mc" class="">
      <ui-gmap-google-map center="mc.map.center" pan="mc.map.pan" zoom="mc.map.zoom" bounds="mc.map.bounds" options="mc.map.options" id="plnkr-map" control="mc.map.control">
        <!-- Markers -->
        <ui-gmap-markers models="mc.map.markers" coords="'self'" options="'self'" fit="mc.map.fit"></ui-gmap-markers>
      </ui-gmap-google-map>
      <ul class="marker-list">
        <li ng-repeat="marker in mc.markerList">
          <button type="button" ng-click="mc.selectMarker(marker)">{{ marker.name }}</button>
        </li>
      </ul>
      <!-- <pre>{{mc.map.markers | json}}</pre> -->
    </div>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js" charset="utf-8"></script>
    <script data-require="angular-simple-logger@*" data-semver="0.0.2" src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.js" charset="utf-8"></script>
    <script src="controller.js"></script>
    <script src="service.js"></script>
  </body>

</html>

'use strict';
angular
  .module('app', ['uiGmapgoogle-maps'])
  .controller('mapController', mapController);
  
  mapController.$inject = ['$scope', '$timeout', 'uiGmapGoogleMapApi', 'mapService'];
  function mapController($scope, $timeout, uiGmapGoogleMapApi, mapService) {
    
    var vm = this;
    vm.map = mapService.map;
    vm.markerList = [
      {
      "id": "marker1",
      "latitude": 38.2215339504538,
      "longitude": -80.5515716505056,
      "name": "Marker 1"
      },
      {
      "id": "marker2",
      "latitude": 38.22947197085,
      "longitude": -80.5342597295017,
      "name": "Marker 2"
      }
    ];
    
    uiGmapGoogleMapApi.then(function(mapObj) {
      vm.selectMarker = function(marker) {
        return mapService.selectMarker(marker, vm.map, mapObj);
      };
    });


  }

.angular-google-map,
.angular-google-map-container {
	height: 30em;
}

.map-labels {
  color: white;
  background-color: rgba(0,0,0, 0.6);
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  width: 100px;
  padding: 2px 5px 2px 5px;
  border: 1px solid white;
  white-space: nowrap;
}

.marker-list {
  list-style-type: none;
}

'use strict';

  angular
    .module('app')
    .service('mapService', mapService);

  mapService.$inject =[];
  function mapService() {

    var mapOptions = {
      center: {
        latitude: 41.7673690472421,
        longitude: -95.993814375
      },
      pan: true,
      zoom: 4,
      bounds: {
      },
      fit: true,
      options: {
        scrollwheel: true
      },
      doRebuildAll: true
    };

    this.map = {
      center: mapOptions.center,
      pan: mapOptions.pan,
      zoom: mapOptions.zoom,
      bounds: mapOptions.bounds,
      fit: mapOptions.fit,
      options: mapOptions.options,
      doRebuildAll: mapOptions.doRebuildAll,
      markers: [],
      control: {}
    };
    
    var pushMarker = function(marker, map, mapObj) {
       map.markers.push({
        id: marker.id,
        latitude: marker.latitude,
        longitude: marker.longitude,
        title: marker.name+'\nClick to view details',
        labelContent: marker.name,
        labelClass: 'map-labels',
        labelAnchor: "50 0",
        show: false,
        options: {
          icon: new mapObj.MarkerImage("http://labs.google.com/mapfiles/kml/pal4/icon62.png"),
          draggable: false,
          clickable: true,
          animation: google.maps.Animation.DROP
          },
        coords: {
          latitude: marker.latitude,
          longitude: marker.longitude
        }
      });
    };
    
    var removeMarker = function(marker, map) {
      map.markers = map.markers.filter(function(el) {
        return el.id !== marker.id;
      });
    };
    
    this.selectMarker = function(marker, map, mapObj) {
        for(var i=0; i<map.markers.length; i++) {
          if(map.markers[i].id === marker.id) {
            removeMarker(marker, map);
            return;
          }
        }
        pushMarker(marker, map, mapObj);
      };

  }