diff --git a/app.py b/app.py
index 85dbbbccf6f98b4d91d0c9e81f4032c28d026654..4c479fb24a21e5af536cabce44d65af9173f23d8 100644
--- a/app.py
+++ b/app.py
@@ -37,6 +37,8 @@ def map_embed(mode):
     agency = db.session.query(Agency).filter(Agency.tag==agency_tag).one()
     if not mode or mode == "m":
         return render_template('map.html', agency=agency, config=app.config, embed=True)
+    elif mode == "c":
+        return render_template('combined.html', agency=agency, config=app.config, embed=True)
     elif mode == "p":
         return render_template('predictions.html', agency=agency, config=app.config, embed=True)
 
diff --git a/static/css/combined.css b/static/css/combined.css
new file mode 100644
index 0000000000000000000000000000000000000000..06aaf8d64c06181ac8a18882f8d95f1303f26ac0
--- /dev/null
+++ b/static/css/combined.css
@@ -0,0 +1,23 @@
+body {
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+.combined:not(:first-child) {
+    border-left: 2px solid #ccc;
+}
+.combined.map,
+.combined.predictions {
+    margin: 0;
+    overflow: hidden;
+}
+.combined.map {
+    flex-basis: 20em;
+    flex-grow: 4;
+    flex-shrink: 1;
+}
+.combined.predictions {
+    flex-basis: 15em;
+    flex-shrink: 1;
+    flex-grow: 1;
+}
diff --git a/static/js/embed.js b/static/js/embed.js
index 4fa38ab1a71e8cf3000c0f90de0e53a60013e1e5..a199b578c0256d3cfa093855dabc49a0dbdaf0d2 100644
--- a/static/js/embed.js
+++ b/static/js/embed.js
@@ -71,7 +71,7 @@ BusMap.Embed = function(opts) {
         $("#embed-mode").on('change', function() {
             embedVars['mode'] = $(this).val();
             updateEmbedUrl();
-            if ($(this).val() == "m") {
+            if ($(this).val() == "m" || $(this).val() == "c") {
                 $("label[for=embed-popup]").show();
             } else {
                 $("label[for=embed-popup]").hide();
diff --git a/templates/combined.html b/templates/combined.html
new file mode 100644
index 0000000000000000000000000000000000000000..4bc43ca2b486c84298718dac344fc7583895a202
--- /dev/null
+++ b/templates/combined.html
@@ -0,0 +1,61 @@
+{% extends "base.html" %}
+{% block title -%}
+        {% if agency.short_title %}{{ agency.short_title -}}
+        {% elif agency.title %}{{ agency.title }}{% endif %} Bus Map
+{%- endblock %}
+{% block head %}
+    {{ super() }}
+    <link href="bower/leaflet/dist/leaflet.css" rel="stylesheet"/>
+    <link href="bower/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet"/>
+    <link href="bower/Leaflet.label/dist/leaflet.label.css" rel="stylesheet"/>
+    <link href="static/css/map.css" rel="stylesheet" />
+    <link href="static/css/predictions.css" rel="stylesheet" />
+    <link href="static/css/combined.css" rel="stylesheet" />
+{% endblock %}
+{% block body %}
+    <div class="combined map" id="c-map">
+    </div>
+    <div class="combined predictions" id="c-predictions">
+    </div>
+    <script src="bower/leaflet/dist/leaflet.js"></script>
+    <script src="bower/Leaflet.label/dist/leaflet.label.js"></script>
+    <script src="bower/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
+    <script src="bower/leaflet-marker-rotate/leaflet.marker.rotate.js"></script>
+    <script src="bower/jquery/dist/jquery.min.js"></script>
+    <script src="static/js/map.js"></script>
+    <script src="static/js/predictions.js"></script>
+    <script>
+        var map = BusMap.Map({
+            {% if embed %}embed: true,{% endif %}
+            agency: {{ agency.tag|tojson|safe }},
+            mapElement: $("#c-map").get(0),
+            tileUrl: '{{ config['MAP_TILE_URL']|safe }}',
+            tileOptions: {
+                subdomains: {{ config['MAP_TILE_SUBDOMAINS']|tojson|safe }},
+                tileset: '{{ config['MAP_TILESET']|safe }}',
+                errorTileUrl: '{{ config['MAP_ERROR_TILE_URL']|safe }}',
+            },
+            bounds: [
+                [{{ (agency.lat_min - config['MAP_LAT_PADDING'])|round(5) }},
+                    {{ (agency.lon_min - config['MAP_LON_PADDING'])|round(5) }}],
+                [{{ (agency.lat_max + config['MAP_LAT_PADDING'])|round(5) }},
+                    {{ (agency.lon_max + config['MAP_LON_PADDING'])|round(5) }}]
+            ],
+            refresh: {
+                routes: 60,
+                vehicles: 5,
+            },
+            hashUpdate: false,
+            predictions: false,
+        });
+        var predictions = BusMap.Predictions({
+            agency: {{ agency.tag|tojson|safe }},
+            predictionsElement: $("#c-predictions").get(0),
+            refresh: {
+                routes: 60,
+                predictions: 10,
+            },
+            hashListen: false,
+        });
+    </script>
+{% endblock %}