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

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 =
'OpenStreetMap'; L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © ' + 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>