diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html
index 65782f8db..5d1fcb37e 100644
--- a/app/templates/views/broadcast/partials/area-map-javascripts.html
+++ b/app/templates/views/broadcast/partials/area-map-javascripts.html
@@ -1,19 +1,7 @@
 <script src="{{ asset_url('javascripts/leaflet.js') }}"></script>
 <script>
-  var mapElement = document.getElementById('map');
-  mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
-  var mymap = L.map(
-    'map',
-    {
-      scrollWheelZoom: false
-    }
-  )
   var polygons = []
 
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-  }).addTo(mymap);
-
   {% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %}
     polygons.push(
       L.polygon({{polygon}}, {
@@ -48,10 +36,39 @@
     );
   {% endfor %}
 
+
+  var mapElement = document.getElementById('map');
+
+  // if element is inside a details element then to make the map render correctly we open the details element
+  // and set up the map before closing the details map after
+  grandparent = mapElement.parentElement.parentElement;
+  if (grandparent.className.split(/\s+/).indexOf('govuk-details') > -1) {
+    details = grandparent;
+    details.open = true;
+  }
+
+  mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
+
+  var mymap = L.map(
+    'map',
+    {
+      scrollWheelZoom: false
+    }
+  )
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(mymap);
+
   var polygonGroup = L.featureGroup(polygons).addTo(mymap);
   mymap.fitBounds(
     polygonGroup.getBounds(),
     {padding: [1, 1]}
   );
 
+  // if element is inside a details element then close the details element
+  if (details) {
+    details.open = false;
+  }
+
 </script>
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index 8722d7eca..32fb5a771 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -1,5 +1,6 @@
 {% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/button/macro.njk" import govukButton %}
+{% from "components/details/macro.njk" import govukDetails %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/banner.html" import banner %}
 {% from "components/page-header.html" import page_header %}
@@ -7,6 +8,14 @@
 
 {% extends "withnav_template.html" %}
 
+{% block extra_stylesheets %}
+  {% include "views/broadcast/partials/area-map-stylesheets.html" %}
+{% endblock %}
+
+{% block extra_javascripts %}
+  {% include "views/broadcast/partials/area-map-javascripts.html" %}
+{% endblock %}
+
 {% block service_page_title %}
   {% if broadcast_message.status == 'pending-approval' %}
     {% if broadcast_message.created_by == current_user and current_user.has_permissions('send_messages') %}
@@ -128,6 +137,11 @@
     {% endif %}
   {% endfor %}
 
+  {{ govukDetails({
+    "summaryText": "Show map",
+    "html": '<div id="map"></div>'
+  }) }}
+
   {{ broadcast_message.template|string }}
 
 {% endblock %}