How to display a leaflet map in a single post in jekyll?

Question

I'm trying to insert a map in a single post in Jekyll.

Here is the visible effort of my attempt to this: github link

Here is the link to the github's account itself: link

I took a default template, ie Hyde.

Then I added the Leaflet's CSS and JS files in the _includes/head.html

Then I created a post that relied on the _layouts/default.html (default draws from head.html)

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.

It doesn't show up in the single post itself.

How can I make this work?

I'm hoping to eventually have a series of posts each with their own map, if that's possible.

Here is the code in the solitary post that I have up so far:

---
layout: default
title: Trying to integrate map in jekyll
---
<div id="map">

</div>

<script>
        var map = L.map('map').setView([34.00000, -118.260126], 14); 

        mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>'; L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; ' + mapLink, maxZoom: 18, }).addTo(map);


        var marker = L.marker([34.063298, -118.260126]) .addTo(map).bindPopup("<b>Blah Blah Blah</b><br /><a href='http://www.cnn.com'>Additional Information</a><br />").openPopup();


</script>

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.

Answer 1

Correct code in _includes/head.html is :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">

not

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"></script>

and

<style type="text/css">
  #map {
    width:400px;
    height:550px;
    background-color: red;
  }
</style>

not

<style type="text/css">
  #map {
    width:400px%;
    height:550px;
    background-color: red;
  }
</style>