diff --git a/Gemfile.lock b/Gemfile.lock
index 66b7758e..5b7293bd 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -245,6 +245,3 @@ DEPENDENCIES
   sass
   stretchy
   unicorn
-
-BUNDLED WITH
-   1.10.5
diff --git a/app/app.rb b/app/app.rb
index 527a8dc1..1d6376b1 100644
--- a/app/app.rb
+++ b/app/app.rb
@@ -29,6 +29,10 @@ class App < Padrino::Application
       }
     end
 
+    get :map do
+      render :map, layout: true
+    end
+
     get :endpoints do
       content_type :json
       endpoints = DataMagic.config.api_endpoints.keys.map { |key|
diff --git a/app/views/home.liquid b/app/views/home.liquid
index 3f8ae49a..76d05ed1 100644
--- a/app/views/home.liquid
+++ b/app/views/home.liquid
@@ -1,10 +1,18 @@
+<div id="map-container">
+  <div id="map-background"></div>
+  <div id="map"></div>
+</div>
+
 <h1>{{ title }}</h1>
 
 <h2>API endpoints</h2>
 
-<ul>
+<ul class="endpoints-list">
 {% for name in endpoints %}
-  <li><a href="/{{ name }}">{{ name }}</a></li>
+  <li>
+    <a href="/{{ name }}">{{ name }}</a>
+    <a href="javascript:void(0)" class="map-link" data-map-category="{{ name }}">map</a>
+  </li>
 {% endfor %}
 </ul>
 
diff --git a/app/views/layouts/application.erb b/app/views/layouts/application.erb
index 7640de03..4561611e 100644
--- a/app/views/layouts/application.erb
+++ b/app/views/layouts/application.erb
@@ -4,8 +4,74 @@
   <head>
     <link rel="stylesheet" type="text/css" href="application.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
   </head>
   <body>
     <%== yield %>
+
+    <script type="text/javascript">
+      $(".endpoints-list").on("click", ".map-link", function(e) {
+        e.preventDefault();
+        $("#map-container").children().toggleClass("active");
+
+        var mapCategory = $(e.currentTarget).data("map-category");
+        var mapOptions = {
+          zoom: 3,
+          center: new google.maps.LatLng(39.0997, -94.5783),
+          mapTypeId: google.maps.MapTypeId.DEFAULT
+        };
+        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
+
+        $.ajax({
+          url: "/" + mapCategory,
+          data: { per_page: 100 },
+          success: function(resp) {
+            markerMaker(resp.results);
+          }
+        })
+
+        function markerMaker(cities) {
+          var bounds = new google.maps.LatLngBounds();
+          cities.forEach(function(city) {
+            var latlng = new google.maps.LatLng(
+              city.location.lat,
+              city.location.lon
+            );
+            bounds.extend(latlng);
+
+            var contentString = '<div id="content">' +
+              '<h3>City</h3>' +
+              '<p>' + city.name + '</p>' +
+              '<h3>State</h3>' +
+              '<p>' + city.state + '</p>' +
+              '<h3>Population</h3>' +
+              '<p>' + city.population + '</p>' +
+              '<h3>Land Area</h3>' +
+              '<p>' + city.land_area + '</p>' +
+              '</div>';
+            var infowindow = new google.maps.InfoWindow({
+              content: contentString
+            });
+
+            var marker = new google.maps.Marker({
+              position: latlng,
+              map: map,
+              title: city.name
+            });
+            marker.addListener('click', function() {
+              infowindow.open(map, marker);
+            });
+          })
+
+          map.fitBounds(bounds);
+        }
+
+      });
+
+      $("#map-background").on("click", function(e) {
+        e.preventDefault();
+        $("#map-container").children().toggleClass("active").empty();
+      });
+    </script>
   </body>
 </html>
diff --git a/app/views/map.html b/app/views/map.html
new file mode 100644
index 00000000..c51be257
--- /dev/null
+++ b/app/views/map.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id="map" style="height: 100vh"></div>
+
+    <script>
+      var kansasCity = new google.maps.LatLng(39.0997, -94.5783);
+      var mapOptions = {
+        zoom: 3,
+        center: kansasCity,
+        mapTypeId: google.maps.MapTypeId.DEFAULT
+      };
+      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
+
+      $.get(
+        "/cities",
+        {
+          per_page: 100
+        },
+        function(resp) {
+          markerMaker(resp.results);
+        }
+      )
+
+      var bounds = new google.maps.LatLngBounds();
+      function markerMaker(cities) {
+        cities.forEach(function(city) {
+          var lat = city.location.lat;
+          var lon = city.location.lon;
+
+          var contentString = '<div id="content">' +
+            '<h3>City</h3>' +
+            '<p>' + city.name + '</p>' +
+            '<h3>State</h3>' +
+            '<p>' + city.state + '</p>' +
+            '<h3>Population</h3>' +
+            '<p>' + city.population + '</p>' +
+            '<h3>Land Area</h3>' +
+            '<p>' + city.land_area + '</p>' +
+            '</div>';
+          var infowindow = new google.maps.InfoWindow({
+            content: contentString
+          });
+
+          var latlng = new google.maps.LatLng(lat, lon);
+          bounds.extend(latlng);
+          var marker = new google.maps.Marker({
+            position: latlng,
+            map: map,
+            title: city.name
+          });
+
+          marker.addListener('click', function() {
+            infowindow.open(map, marker);
+          });
+        })
+      }
+
+      map.fitBounds(bounds);
+    </script>
+  </body>
+</html>
diff --git a/public/application.css b/public/application.css
index 25fa51c5..520a51f5 100644
--- a/public/application.css
+++ b/public/application.css
@@ -1,2 +1,33 @@
 body {
 }
+
+#map-background {
+  display: none;
+}
+
+#map {
+  display: none;
+}
+
+#map-background.active {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: black;
+  opacity: 0.8;
+}
+
+#map.active {
+  display: block;
+  position: absolute;
+  width: 80%;
+  height: 80%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) !important;
+  -ms-transform: translate(-50%, -50%) !important;
+  -webkit-transform: translate(-50%, -50%) !important;
+}
