Use Mapbox maps

.gitignore

@@ -1,3 +1,5 @@
 /node_modules/
 .jekyll-metadata
 _site
+.bundle
+vendor/

_includes/head.html

@@ -7,6 +7,10 @@
   <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines }}{% else %}{{ site.description }}{% endif %}">
 
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
+
+
   <link rel="stylesheet" href="{{ "/css/main.css" }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">

_layouts/post.html

@@ -21,9 +21,50 @@ <h1 class="post-title">ClojureBridge {{ event.city }}</h1>
             {% assign latitude=event.latitude %}
             {% assign longitude=event.longitude %}
             {% assign zoom=16 %}
-            <a href="https://www.google.com/maps/place/{{ latitude }}+{{ longitude }}/@{{ latitude }},{{ longitude }},{{ zoom }}z">
-              <img alt="{{ event.city }} map" src="https://maps.googleapis.com/maps/api/staticmap?size=450x300&amp;zoom={{ zoom }}&amp;markers={{ latitude }}%2C{{ longitude }}&amp;key=AIzaSyBHlZkrV89gVAL1z9Wy95LkBiS27UsAv3g">
-            </a>
+            <div id="map" class="map"></div>
+
+            <script>
+
+              mapboxgl.accessToken = 'pk.eyJ1IjoiY2xvanVyZWJyaWRnZSIsImEiOiJjanhhcWx6MjAwNjZpNDBwYjFndWl5NGkyIn0.4An4DAFMdku7GgcMfN-HPA';
+              var map = new mapboxgl.Map({
+                container: 'map',
+                style: 'mapbox://styles/mapbox/streets-v11',
+                center: [ {{longitude}}, {{ latitude}}],
+                zoom: 6
+              });
+
+              var geojson = {
+                "type": "FeatureCollection",
+                "features": [
+                  {
+                    "type": "Feature",
+                    "properties": {
+                      "iconSize": [60, 74]
+                    },
+                    "geometry": {
+                      "type": "Point",
+                      "coordinates": [
+                        {{ longitude }},
+                        {{ latitude }}
+                      ]
+                    }
+                  }]
+              };
+
+              geojson.features.forEach(function(marker) {
+
+                var el = document.createElement('div');
+                el.className = 'marker';
+                el.style.backgroundImage = 'url(/assets/images/marker.png)';
+                el.style.width = marker.properties.iconSize[0] + 'px';
+                el.style.height = marker.properties.iconSize[1] + 'px';
+
+                new mapboxgl.Marker(el)
+                  .setLngLat(marker.geometry.coordinates)
+                  .addTo(map);
+              });
+            </script>
+
           {% endif %}
             <h3>Location</h3>
             <p>{% if event.street %}{{ event.street }}, {% endif %}{{ event.city }}, {{ event.country }}</p>

css/main.css

@@ -25,6 +25,17 @@ body {
   overflow: auto;
 }
 
+.map {
+  width: 100%;
+  height: 300px;
+  margin-bottom: 2em;
+}
+
+.marker {
+  background-size: cover;
+  margin-top: -37px;
+}
+
 @media screen and (min-width: 800px) {
   .logo {
     float: left;