Angular.js - Google Maps - Markers clustering & spiderfying

angular-js-google-maps-markers-clustering-spiderfying.markdown

Angular.js - Google Maps - Markers clustering & spiderfying

Angular UI Google maps - https://angular-ui.github.io/angular-google-maps

A Pen by Paolo Rossi on CodePen.

License.

index.html

<div ng-app="myApp" ng-controller="gMap">
  <ui-gmap-google-map center='map.center' events="map.events" zoom='map.zoom' bounds="map.bounds" control="map.control">
    <ui-gmap-markers
                     type="map.type"
                     idkey="'id'"
                     models="markers" 
                     coords="'coords'" 
                     options="'options'" 
                     type="map.type" 
                     idkey="'id'" 
                     models="markers" 
                     coords="'coords'" 
                     options="'options'" 
                     typeEvents="map.clusterEvents"
                     typeOptions="map.options">
    </ui-gmap-markers>
  </ui-gmap-google-map>
</div>

script.js

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);

myApp.factory("Markers", function(){
  var Markers = [
    {
      "id": "0",
      "coords": {
        "latitude": "41.5200",
        "longitude": "-72.6819"
      }
    },
    {
      "id": "1",
      "coords": {
        "latitude": "40.7903",
        "longitude": "-73.9597"
      }
    },
    {
      "id": "2",
      "coords": {
        "latitude": "40.7903",
        "longitude": "-73.9597"
      }
    }
  ];
  return Markers;
});

myApp.controller("gMap",function($scope,Markers){

  $scope.markers = Markers;
  
  $scope.map = { 
        center: {
          latitude: 41.9484384,
          longitude: -73
        },
        zoom: 5,
        type : 'cluster',
        bounds: {},
        control: {},
        options: {
          maxZoom:15,
          styles: [{
              textColor: 'white',
              url: 'http://s15.postimg.org/fuaqrrot3/rsz_cluster_resize.png',
              height: 40,
              width: 40,
              textSize: 11,
              fontWeight: 'normal'
            }],
          keepSpiderfied:true
        },
        events: {
        zoom_changed: function(map){
          $scope.map.type = (map.getZoom() >= 14) ?  'spider' : 'cluster'; 
        }
      },
      clusterEvents : {
        click: function() {
            $log.info('[+] clicked cluster');
        }
      }
    };
});

scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.4.1/angular-google-maps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-simple-logger/0.1.7/angular-simple-logger.min.js"></script>

style.scss

html,
body {
  height: 100%;
}

.angular-google-map-container {
  height: 100vh;
}