A directive to embed Google Static Maps in AngularJS through a simple tag.
18 | 19 | 22 | 23 | 26 | 27 | 30 |bower install --save angular-google-staticmapsangular-google-staticmaps.js.wu.staticGmap in your module dependencies.static-gmap directive.<static-gmap
60 | size="640x200"
61 | sensor="false"
62 | zoom="14"
63 | markers="{ color: 'red', label: 'X', coords: [61.133789, 10.401121] }">
64 | </static-gmap>
65 |
69 |
70 |
71 |
72 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration
2 | module.exports = function (config) {
3 | 'use strict';
4 |
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine'],
8 | files: [
9 | 'bower_components/angular/angular.js',
10 | 'bower_components/angular-mocks/angular-mocks.js',
11 | 'src/angular-google-staticmaps.js',
12 | 'test/spec/**/*.coffee'
13 | ],
14 | exclude: [],
15 | reporters: ['dots'],
16 | autoWatch: false,
17 | browsers: ['Chrome'],
18 | captureTimeout: 5000,
19 | singleRun: true,
20 | reportSlowerThan: 100
21 | });
22 | };
23 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-google-staticmaps",
3 | "version": "0.3.0",
4 | "devDependencies": {
5 | "grunt-contrib-uglify": "~0.2.2",
6 | "grunt": "~0.4.1",
7 | "grunt-contrib-concat": "~0.3.0",
8 | "grunt-karma": "~0.6.2",
9 | "grunt-conventional-changelog": "~1.0.0",
10 | "karma-script-launcher": "~0.1.0",
11 | "karma-chrome-launcher": "~0.1.0",
12 | "karma-firefox-launcher": "~0.1.0",
13 | "karma-html2js-preprocessor": "~0.1.0",
14 | "karma-jasmine": "~0.1.3",
15 | "karma-requirejs": "~0.1.0",
16 | "karma-coffee-preprocessor": "~0.1.0",
17 | "karma-phantomjs-launcher": "~0.1.0",
18 | "karma": "~0.10.2"
19 | },
20 | "scripts": {
21 | "test": "grunt test"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/angular-google-staticmaps.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * angular-google-staticmaps <%= pkg.version %>
3 | * Pascal Hartig, weluse GmbH, http://weluse.de/
4 | * License: MIT
5 | */
6 | (function () {
7 | 'use strict';
8 |
9 | angular.module('wu.staticGmap', [])
10 | .controller('StaticGmapCtrl', function () {
11 | var BASE_URL = '//maps.googleapis.com/maps/api/staticmap?';
12 | var STYLE_ATTRIBUTES = ['color', 'label', 'size'];
13 |
14 | this.makeMarkerStrings = function makeMarkerStrings(markers) {
15 | return markers.map(function (marker) {
16 | var str = Object.keys(marker).map(function (key) {
17 | if (STYLE_ATTRIBUTES.indexOf(key) > -1) {
18 | return key + ':' + marker[key] + '|';
19 | }
20 | }).join('');
21 |
22 | return str + marker.coords.join(',');
23 | });
24 | };
25 |
26 | this.buildSourceString = function buildSourceString(attrs, markers) {
27 | var markerStrings;
28 |
29 | if (markers) {
30 | if (!angular.isArray(markers)) {
31 | markers = [markers];
32 | }
33 | markerStrings = this.makeMarkerStrings(markers);
34 | }
35 |
36 | var params = Object.keys(attrs).map(function (attr) {
37 | if (attr === 'markers' && markerStrings) {
38 | return Object.keys(markerStrings).map(function (key) {
39 | return 'markers=' + encodeURIComponent(markerStrings[key]);
40 | }).join('&');
41 | }
42 |
43 | if (attr[0] !== '$' && attr !== 'alt') {
44 | return encodeURIComponent(attr) + '=' + encodeURIComponent(attrs[attr]);
45 | }
46 | });
47 |
48 | return BASE_URL + params.reduce(function (a, b) {
49 | if (!a) {
50 | return b;
51 | }
52 |
53 | if (b !== undefined) {
54 | return a + '&' + b;
55 | }
56 |
57 | return a;
58 | }, '');
59 | };
60 | })
61 | .directive('staticGmap', function ($parse) {
62 | return {
63 | template: '