Angular directive for static google maps using [gmaps](hpneo.github.io/gmaps/)

directive.js

angular.module('Your_Name_App').directive('staticMap', [function () {
    return {
        restrict: 'A',
        template: '<a href="{{mapUrl}}" target="_blank"><img src="{{mapUrl}}" /></a>',
        replace: true,
        scope: {
            position: '=position',
        },
        link: function postLink(scope, element, attrs, controller) {
            var generateStaticMap = function() {
                scope.mapUrl = GMaps.staticMapURL({
                    size: [300, 317],
                    lat: scope.position.lat,
                    lng: scope.position.lng,
                    markers: [
                        { lat: scope.position.lat, lng: scope.position.lng, color:'blue'}
                    ]
                });
            };

            if (scope.position) {
                generateStaticMap();
            }

            scope.$watch('position', function(newVal) {
                if (newVal) {
                    generateStaticMap();
                }
            });

        }
    };
}]);

index.html

<div data-position="{lat:'12.02', lng:'74.02'}" data-static-map></div>