angular-leaflet-directive example fiddle

http://angularjs.org/

by Alien_time

HTML

<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQTpXj82d8UpCi97wzo_nKXL7nYrd4G70"></script>
<script src="https://raw.githubusercontent.com/angular-ui/ui-event/master/dist/event.min.js"></script>
<script src="https://raw.githubusercontent.com/angular-ui/ui-map/master/src/ui-map.js"></script>
<body ng-app="demoapp" ng-controller="DemoController">
    <section id="map">
        <div ui-map="myMap" ui-options="mapOptions" class="google-map"></div>
    </section>
</body>

JavaScript

var app = angular.module('demoapp', ['ui.event', 'ui.map']);

app.controller('DemoController', ['$scope', function ($scope) {
    $scope.mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(-25.363882, 131.044922),
        // Style for Google Maps
        styles: [{
            "featureType": "water",
                "stylers": [{
                "saturation": 43
            }, {
                "lightness": -11
            }, {
                "hue": "#0088ff"
            }]
        }, {
            "featureType": "road",
                "elementType": "geometry.fill",
                "stylers": [{
                "hue": "#ff0000"
            }, {
                "saturation": -100
            }, {
                "lightness": 99
            }]
        }, {
            "featureType": "road",
                "elementType": "geometry.stroke",
                "stylers": [{
                "color": "#808080"
            }, {
                "lightness": 54
            }]
        }, {
            "featureType": "landscape.man_made",
                "elementType": "geometry.fill",
                "stylers": [{
                "color": "#ece2d9"
            }]
        }, {
            "featureType": "poi.park",
                "elementType": "geometry.fill",
                "stylers": [{
                "color": "#ccdca1"
            }]
        }, {
            "featureType": "road",
                "elementType": "labels.text.fill",
                "stylers": [{
                "color": "#767676"
            }]
        }, {
            "featureType": "road",
                "elementType": "labels.text.stroke",
                "stylers": [{
                "color": "#ffffff"
            }]
        }, {
            "featureType": "poi",
                "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "landscape.natural",
                "elementType": "geometry.fill",
                "stylers":...