feat(map): Added support for map embed with option place, view and st…

…reetview
ritz078 · Nov 4, 2015 · 9a5d8b4 · 9a5d8b4
1 parent 5abdb64
commit 9a5d8b4
Show file tree

Hide file tree

Showing 7 changed files with 416 additions and 253 deletions.
diff --git a/build.json b/build.json
@@ -6,6 +6,7 @@
         "SMILEY"        : true,
         "HIGHLIGHTCODE" : true,
 
+        "MAP"           : true,
 
         "YOUTUBE"       : true,
         "VIMEO"         : true,

diff --git a/demo/index.html b/demo/index.html
@@ -36,7 +36,7 @@ <h1>Loading embed.js in a block</h1>
 
 <div id="block">
 	Pulchritudines nocere, :heart: tanquam talis hibrida.A falsis, brodium :+1: salvus gabalium.Nunquam
-	promissio
+	promissio @(iit roorkee)
 	http://iitr.ac.in caesium.Cum rumor
 	https://twitter.com/IGN/status/652941146054881281
 	peregrinationes https://www.flickr.com/photos/xdjio/226228060/, omnes ususes http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_50mb.mp4
@@ -69,7 +69,8 @@ <h1>Loading embed.js in a block</h1>
 		element: document.getElementById('block'),
 		videoDetails:false,
 		videoJS:true,
-		videoWidth:720
+		videoWidth:720,
+		googleAuthKey:'AIzaSyCqFouT8h5DKAbxlrTZmjXEmNBjC69f0ts',
 	});
 	x.render();
 	x.text(function(data){

diff --git a/dist/embed.min.js b/dist/embed.min.js
diff --git a/src/embed.js b/src/embed.js
diff --git a/src/embed.js.map b/src/embed.js.map
diff --git a/src/js/embed.es6 b/src/js/embed.es6
@@ -26,6 +26,7 @@ if (build.SMILEY)  var Smiley  = require('./modules/emoticons/smiley.es6');
 if (build.LINK)    var Url     = require('./modules/url.es6');
 
 if (build.TWITTER) var Twitter = require('./modules/twitter/twitter.es6');
+if (build.MAP)     var Gmap     = require('./modules/map/map.es6');
 
 const Code   = require('./modules/code/code.es6');
 const Video  = require('./modules/video/video.es6');
@@ -54,6 +55,10 @@ const helper = require('./modules/video/helper.es6');
             fluid   : true,
             preload : 'metadata'
         },
+        locationEmbed : true,
+        mapOptions : {
+            mode : 'place'
+        },
         tweetsEmbed: true,
         tweetOptions: {
             maxWidth   : 550,
@@ -124,7 +129,7 @@ const helper = require('./modules/video/helper.es6');
             output           = options.fontIcons && build.SMILEY ? (new Smiley(output, options).process()) : output;
             [output, embeds] = (new Code(input, output, options, embeds).process());
             [output, embeds] = await (new Video(input, output, options, embeds).process());
-
+            [output,embeds]  = options.locationEmbed ? await (new Gmap(input, output, options, embeds).process()) : [output, embeds];
             [output, embeds] = (new Audio(input, output, options, embeds).process());
             [output, embeds] = (new Image(input, output, options, embeds).process());
             if (options.tweetsEmbed && build.TWITTER) {

diff --git a/src/js/modules/map/map.es6 b/src/js/modules/map/map.es6
@@ -0,0 +1,56 @@
+const utils = require('../utils.es6');
+
+class Gmap {
+    constructor(input, output, options, embeds) {
+        this.input = input;
+        this.output = output;
+        this.options = options;
+        this.embeds = embeds;
+        this.regex = /@\((.+)\)/gi;
+    }
+
+    async getCoordinate(location) {
+        let url = `http://maps.googleapis.com/maps/api/geocode/json?address=${location}&sensor=false`;
+        let response = await fetch(url);
+        let data = await response.json();
+        console.log(data);
+        let [latitude, longitude] = [data.results[0].geometry.location.lat, data.results[0].geometry.location.lng];
+        return [latitude, longitude]
+    }
+
+    template(match, latitude, longitude) {
+        let template;
+        let location = match.split('(')[1].split(')')[0];
+        let config = this.options.mapOptions;
+        let dimensions = utils.dimensions(this.options);
+        if (config.mode === 'place') {
+            template =
+                `<div class="ejs-embed ejs-map"><iframe width="${dimensions.width}" height="${dimensions.height}" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=${this.options.googleAuthKey}&q=${location}"></iframe></div>`;
+        } else if (config.mode === 'streetview') {
+            template =
+                `<div class="ejs-embed ejs-map"><iframe width="${dimensions.width}" height="${dimensions.height}" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/streetview?key=${this.options.googleAuthKey}&location=${latitude},${longitude}&heading=210&pitch=10&fov=35"></iframe></div>`;
+        } else if (config.mode === 'view') {
+            template =
+                `<div class="ejs-embed ejs-map"><iframe width="${dimensions.width}" height="${dimensions.height}" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/view?key=${this.options.googleAuthKey}&center=${latitude},${longitude}&zoom=18&maptype=satellite"></iframe></div>`
+        }
+        return template;
+    }
+
+    async process() {
+        let match;
+        while ((match = utils.matches(this.regex, this.input)) !== null) {
+            let [latitude, longitude] = this.options.mapOptions.mode !== 'place' ? await this.getCoordinate(match[0]) : [null, null];
+            let text = this.template(match[0], latitude, longitude);
+            this.embeds.push({
+                text: text,
+                index: match.index
+            })
+        }
+        this.output = this.output.replace(this.regex, function(match) {
+            return '<span class="ejs-location">' + match.split('(')[1].split(')')[0] + '</span>';
+        });
+        return [this.output, this.embeds];
+    }
+}
+
+module.exports = Gmap;