diff --git a/app/assets/javascripts/Jit/graphsettings-model.js b/app/assets/javascripts/Jit/graphsettings-model.js
index 30b639cc..09b62e22 100644
--- a/app/assets/javascripts/Jit/graphsettings-model.js
+++ b/app/assets/javascripts/Jit/graphsettings-model.js
@@ -6,6 +6,7 @@
  */
 
 var MetamapsModel = new Object();
+MetamapsModel.embed = false;
 MetamapsModel.selectedEdges = new Array();
 MetamapsModel.showcardInUse = null;
 MetamapsModel.lastCanvasClick = 0;
diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js
index 4bb06744..50a34da3 100644
--- a/app/assets/javascripts/Jit/graphsettings.js
+++ b/app/assets/javascripts/Jit/graphsettings.js
@@ -5,7 +5,7 @@
  * Then if it's a centred graph additional settings are added.
  */
 
-function graphSettings(type) {
+function graphSettings(type, embed) {
    var t = {
      //id of the visualization container
      injectInto: 'infovis',
@@ -103,6 +103,10 @@ function graphSettings(type) {
     }
   };
 
+  if (embed) {
+    t.Edge.type = 'customEdgeEmbed';
+  }
+  
   if (type == "centered") {
     t.background  = {
       CanvasStyles: {
@@ -247,7 +251,8 @@ var nodeSettings = {
 			  if (onCanvas) {
 				  ctx.beginPath();
 				  ctx.arc(pos.x, pos.y, dim+3, 0, 2 * Math.PI, false);
-				  ctx.strokeStyle = 'white';
+          if (! MetamapsModel.embed) ctx.strokeStyle = 'white';
+          if (MetamapsModel.embed) ctx.strokeStyle = '#999';
 				  ctx.lineWidth = 2;
 				  ctx.stroke();
 			  }
@@ -337,6 +342,59 @@ var nodeSettings = {
 		}  
 	  }  
 	}
+  
+  var edgeSettingsEmbed = {  
+	  'customEdgeEmbed': {  
+		'render': function(adj, canvas) {  
+		  //get nodes cartesian coordinates 
+		  var pos = adj.nodeFrom.pos.getc(true); 
+		  var posChild = adj.nodeTo.pos.getc(true);
+		  
+		  var directionCat = adj.getData("category");
+		  //label placement on edges 
+          renderEdgeArrows(this.edgeHelper, adj);
+		   
+		  //check for edge label in data  
+		  var desc = adj.getData("desc");
+		  var showDesc = adj.getData("showDesc");
+		  if( desc != "" && showDesc ) { 
+            // '&' to '&'
+            desc = decodeEntities(desc);
+
+            //now adjust the label placement 
+            var ctx = canvas.getCtx();
+			var radius = canvas.getSize(); 
+			var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2); 
+			var y = parseInt((pos.y + posChild.y) /2); 
+			ctx.font = 'bold 14px arial';
+
+            //render background
+            ctx.fillStyle = '#999';
+            var margin = 5;
+            var height = 14 + margin; //font size + margin
+            var CURVE = height / 2; //offset for curvy corners
+            var width = ctx.measureText(desc).width + 2 * margin - 2 * CURVE
+            var labelX = x - margin + CURVE;
+            var labelY = y - height + margin;
+            ctx.fillRect(labelX, labelY, width, height);
+
+            //curvy corners woo - circles in place of last CURVE pixels of rect
+            ctx.beginPath();
+            ctx.arc(labelX, labelY + CURVE, CURVE, 0, 2 * Math.PI, false);
+            ctx.arc(labelX + width, labelY + CURVE, CURVE, 0, 2 * Math.PI, false);
+            ctx.fill();
+            
+            //render text
+			ctx.fillStyle = '#000';
+			ctx.fillText(desc, x, y); 
+		  }
+		}, 'contains' : function(adj, pos) { 
+				var from = adj.nodeFrom.pos.getc(true), 
+				 to = adj.nodeTo.pos.getc(true);
+				return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon); 
+		}  
+	  }  
+	}
 
 
 function onMouseMoveHandler(node, eventInfo, e) {
diff --git a/app/assets/javascripts/Jit/loadgraphs.js b/app/assets/javascripts/Jit/loadgraphs.js
index 380acbb6..2335a4ba 100644
--- a/app/assets/javascripts/Jit/loadgraphs.js
+++ b/app/assets/javascripts/Jit/loadgraphs.js
@@ -17,6 +17,7 @@
 $jit.ForceDirected.Plot.NodeTypes.implement(nodeSettings);
 //implement an edge type  
 $jit.ForceDirected.Plot.EdgeTypes.implement(edgeSettings);
+$jit.ForceDirected.Plot.EdgeTypes.implement(edgeSettingsEmbed);
 // end
 
 // init custom node type 
@@ -25,11 +26,14 @@ $jit.RGraph.Plot.NodeTypes.implement(nodeSettings);
 $jit.RGraph.Plot.EdgeTypes.implement(edgeSettings);
 // end
 
-function initialize(type, loadLater){
+function initialize(type, loadLater, embed){
 
   if (loadLater == null) {
 	   loadlater = false;
   }
+  if (embed == null) {
+	   embed = false;
+  }
 
   viewMode = "graph";
   gType = type;
@@ -40,7 +44,7 @@ function initialize(type, loadLater){
   }
   else if ( type == "arranged" || type == "chaotic" ) {
 	  // init ForceDirected
-	 Mconsole = new $jit.ForceDirected(graphSettings(type));
+	 Mconsole = new $jit.ForceDirected(graphSettings(type, embed));
   }
   else {
 	 alert("You didn't specify a type!"); 
diff --git a/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js b/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js
index 3204f182..c96b31bd 100644
--- a/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js
+++ b/app/assets/javascripts/Jit/select-edit-delete-nodes-and-edges.js
@@ -295,11 +295,19 @@ function selectEdge(edge) {
   var showDesc = edge.getData("showDesc");
   if (! showDesc) {
     edge.setData('showDesc', true, 'current');
-    edge.setDataset('end', {
-      lineWidth: 4,
-      color: '#FFFFFF',
-      alpha: 1
-    });
+    if ( ! MetamapsModel.embed) {
+      edge.setDataset('end', {
+        lineWidth: 4,
+        color: '#FFFFFF',
+        alpha: 1
+      });
+    } else if (MetamapsModel.embed) {
+      edge.setDataset('end', {
+        lineWidth: 4,
+        color: '#999',
+        alpha: 1
+      });
+    }
     Mconsole.fx.animate({
       modes: ['edge-property:lineWidth:color:alpha'],
       duration: 100
diff --git a/app/assets/stylesheets/maps.css.scss b/app/assets/stylesheets/maps.css.scss
index 129a14bb..c1b3557e 100644
--- a/app/assets/stylesheets/maps.css.scss
+++ b/app/assets/stylesheets/maps.css.scss
@@ -2,6 +2,10 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
+.white_bg { 
+  background: white !important;
+}
+
 .mapdata {
   color: #1A1;
   font-style: italic;
diff --git a/app/controllers/maps_controller.rb b/app/controllers/maps_controller.rb
index f6e8fb83..adcd38bc 100644
--- a/app/controllers/maps_controller.rb
+++ b/app/controllers/maps_controller.rb
@@ -48,6 +48,24 @@ class MapsController < ApplicationController
     end
   end
   
+  # GET maps/:id/embed
+  def embed
+  	
+	  @current = current_user
+	  @map = Map.find(params[:id]).authorize_to_show(@current)
+	
+	  if not @map
+	    redirect_to root_url and return
+	  end
+		
+	  @mapjson = @map.self_as_json(@current).html_safe
+	
+	  respond_to do |format|
+      format.html { respond_with(@map, @user) }
+      format.json { respond_with(@mapjson) }
+    end
+  end
+  
   # GET maps/:id/json
   def json
   	
diff --git a/app/views/maps/embed.html.erb b/app/views/maps/embed.html.erb
new file mode 100644
index 00000000..8c6860fa
--- /dev/null
+++ b/app/views/maps/embed.html.erb
@@ -0,0 +1,61 @@
+<%#
+  # @file
+  # Code to display a map
+  # /maps/:id
+  #%>
+
+<div class="headertop">
+    <% if authenticated? %>
+      <% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
+        <button onclick="removeSelectedEdges();removeSelectedNodes();">Remove Selected From Map</button>
+      <% end %>
+      <button onclick="var r=confirm('Are you sure you want to permanently delete selected objects?!'); if (r == true) {deleteSelectedEdges();deleteSelectedNodes();}">Permanently Delete Selected</button>
+      <% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
+			  <%= form_for @map, :url => savelayout_path(@map), :html => { :class => "saveMapLayout", :id => "saveMapLayout"}, remote: true do |form| %>
+				  <%= form.hidden_field "coordinates", :value => "" %>
+				  <%= form.submit "Save Layout", class: "saveLayout", id: "saveLayout" %>
+			  <% end %>
+		  <% end %>
+    <% end %>
+</div>
+<div class="clearfloat"></div>
+
+<div class="maps onMap white_bg" id="container">
+  <div id="center-container">
+    <div id="infovis"></div>    
+  </div>
+</div>
+<div class="clearfloat"></div>
+
+<% if authenticated? %>
+  <%= render :partial => 'newtopic' %>
+  <%= render :partial => 'newsynapse' %>
+<% end %>
+  
+<script>
+  var dragged = 0;
+  mapid = <%= @map.id %>;
+  <% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
+    mapperm = true;
+  <% end %>
+</script>
+
+<script>
+  viewMode = "graph";
+	json = <%= @mapjson %>;
+	if (json.length > 0) {
+		$(document).ready(function() {
+			<% if (@map.arranged) %>
+				initialize("arranged", false, true);
+			<% else %>
+				initialize("chaotic", false, true);
+			<% end %>
+		});
+	}
+  else {
+		$(document).ready(function() {
+				initialize("chaotic", true, true);
+		});
+	}
+  MetamapsModel.embed = true;
+</script>
diff --git a/app/views/topics/create.js.erb b/app/views/topics/create.js.erb
index 5f2b80ee..9dbdce9f 100644
--- a/app/views/topics/create.js.erb
+++ b/app/views/topics/create.js.erb
@@ -2,9 +2,9 @@
  * @file
  * This javascript is returned and executed when you create a new node.
  */
+$('#topic_name').autocomplete('disable');
 $('#new_topic').fadeOut('fast');
 $('#topic_name').attr('value','');
-$('#topic_name').autocomplete('disable');
 $('#topic_grabTopic').attr('value','null');
 $('#topic_addSynapse').attr('value','false');
 
diff --git a/config/routes.rb b/config/routes.rb
index d5f3d162..9313f6c1 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -30,6 +30,7 @@ ISSAD::Application.routes.draw do
   resources :maps do
     get :autocomplete_map_name, :on => :collection
   end
+  match 'maps/:id/embed', to: 'maps#embed', via: :get, as: :embed
   match 'maps/:id/:format', to: 'maps#json', via: :get, as: :json
   
   resources :users do