Google Maps with AngularJS

a small fiddle combining google maps with angularjs

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<div ng-app="mapsApp" ng-controller="MapCtrl">
    <div id="map"></div>
</div>

CSS

html, body, div[ng-app="mapsApp"], #map {

    height:100%;

    width:100%;

    margin:0;

    padding:0;

}

.iw {

    padding:3px;

    overflow:visible !important;

    white-space:nowrap

}

JavaScript

//Angular App Module and Controller
angular.module('mapsApp', [])
    .controller('MapCtrl', function ($scope) {

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
    $scope.markers = [];
    //create some markers
    for (var i = 1; i < 11; ++i) {
        $scope.markers.push(new google.maps.Marker({
            position: new google.maps.LatLng(0, 0),
            desc: '<div class="iw">description for Marker#' + i + '</div>',
            icon: 'https://mt.google.com/vt/icon?psize=12&font=fonts/Roboto-Regular.ttf&color=ff330000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1&text=' + i
        }))
    }
    $scope.oms = new OverlappingMarkerSpiderfier($scope.map, {
        keepSpiderfied: true
    });
    $scope.oms.addListener('unspiderfy', function () {
        $scope.iw.close();
    });

    //create a single InfoWindow-instance
    $scope.iw = new google.maps.InfoWindow();
    google.maps.event.addListener($scope.iw, 'closeclick', function () {
        $scope.oms.unspiderfy();
    });
    //add click-listener
    $scope.oms.addListener('click', function (marker) {
        $scope.iw.close();
        $scope.iw.setContent(marker.desc);
        $scope.iw.open($scope.map, marker);

    });

    //add the markers to the oms
    for (var i = 0; i < $scope.markers.length; ++i) {
        $scope.markers[i].setMap($scope.map);
        $scope.oms.addMarker($scope.markers[i]);
    }




});