AngularJS - Directives

Custom Directive - Map

by Ryan Morris

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div ng-app="myApp">
    <div class="container" ng-controller="MainCtrl">
         <h1>Custom Directives</h1>

        <div google-map address="Plano+TX" zoom="15" width="200" height="140"></div>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', ['GoogleMap']);

myApp.controller('MainCtrl', ['$scope', function ($scope) {


}]);

angular.module('GoogleMap', [])
    .directive('googleMap', [function () {

    return {
        template: '<img src="https://maps.googleapis.com/maps/api/staticmap?center={{address}}&size={{width}}x{{height}}&zoom={{zoom}}" />',
        link: function ($scope, $element, $attributes) {

            $scope.height = $attributes.height ? $attributes.height : '300';
            $scope.width = $attributes.width ? $attributes.width : '300';
            $scope.zoom = $attributes.zoom ? $attributes.zoom : '13';
            $scope.address = $attributes.address ? $attributes.address : 'Brooklyn+Ny';

            console.log($attributes);

        },
        scope: true
    }

}]);