title: How to display a leaflet map in a single post in jekyll?
body: <p>I'm trying to insert a map in a single post in Jekyll. </p>
  
  <p>Here is the visible effort of my attempt to this: <a href="http://arubyist.github.io/testing/" rel="nofollow">github link</a> </p>
  
  <p>Here is the link to the github's account itself: <a href="https://github.com/arubyist/testing" rel="nofollow">link</a> </p>
  
  <p>I took a default template, ie Hyde. </p>
  
  <p>Then I added the Leaflet's CSS and JS files in the _includes/head.html </p>
  
  <p>Then I created a post that relied on the _layouts/default.html (default draws from head.html)</p>
  
  <p>As I said, I'm attempting to insert a single map in a single post. If you look at the first link, it shows the map all over the blog in a weird manner. </p>
  
  <p>It doesn't show up in the single post itself. </p>
  
  <p>How can I make this work? </p>
  
  <p>I'm hoping to eventually have a series of posts each with their own map, if that's possible. </p>
  
  <p>Here is the code in the solitary post that I have up so far: </p>
  
  <pre><code>---
  layout: default
  title: Trying to integrate map in jekyll
  ---
  &lt;div id="map"&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
          var map = L.map('map').setView([34.00000, -118.260126], 14); 
  
          mapLink =
  '&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;'; L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &amp;copy; ' + mapLink, maxZoom: 18, }).addTo(map);
  
  
          var marker = L.marker([34.063298, -118.260126]) .addTo(map).bindPopup("&lt;b&gt;Blah Blah Blah&lt;/b&gt;&lt;br /&gt;&lt;a href='http://www.cnn.com'&gt;Additional Information&lt;/a&gt;&lt;br /&gt;").openPopup();
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I realize that this post relies a lot on links, and that's frowned up on here at SO. But I have no other way of explaining my problem. </p>