diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index de9749210..383d13091 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -34,6 +34,7 @@
 @import "legislation";
 @import "legislation_process";
 @import "legislation_process_form";
+@import "map_location";
 @import "moderation_actions";
 @import "notification_item";
 @import "community";
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 96f9b4bdf..568e36891 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -19,7 +19,6 @@
 // 20. Documents
 // 21. Related content
 // 22. Images
-// 23. Maps
 // 24. Homepage
 // 25. LocalCensusRecords
 //
@@ -2152,48 +2151,6 @@ table {
   }
 }
 
-// 23. Maps
-// -----------------
-
-.location-map-remove-marker {
-  border-bottom: 1px dotted #cf2a0e;
-  color: $delete;
-  display: inline-block;
-  margin-top: $line-height / 2;
-
-  &:hover,
-  &:active,
-  &:focus {
-    border-bottom-style: solid;
-    color: #cf2a0e;
-    text-decoration: none;
-  }
-}
-
-.leaflet-bar a {
-
-  &.leaflet-disabled {
-    color: #525252;
-  }
-}
-
-.leaflet-container {
-
-  .leaflet-control-attribution {
-    background: rgba(255, 255, 255, 0.9);
-  }
-
-  a {
-    @include link;
-  }
-}
-
-.leaflet-bottom,
-.leaflet-pane,
-.leaflet-top {
-  z-index: 4;
-}
-
 // 24. Homepage
 // ------------
 
diff --git a/app/assets/stylesheets/map_location.scss b/app/assets/stylesheets/map_location.scss
new file mode 100644
index 000000000..282744fe8
--- /dev/null
+++ b/app/assets/stylesheets/map_location.scss
@@ -0,0 +1,38 @@
+.location-map-remove-marker {
+  border-bottom: 1px dotted #cf2a0e;
+  color: $delete;
+  display: inline-block;
+  margin-top: $line-height / 2;
+
+  &:hover,
+  &:active,
+  &:focus {
+    border-bottom-style: solid;
+    color: #cf2a0e;
+    text-decoration: none;
+  }
+}
+
+.leaflet-bar a {
+
+  &.leaflet-disabled {
+    color: #525252;
+  }
+}
+
+.leaflet-container {
+
+  .leaflet-control-attribution {
+    background: rgba(255, 255, 255, 0.9);
+  }
+
+  a {
+    @include link;
+  }
+}
+
+.leaflet-bottom,
+.leaflet-pane,
+.leaflet-top {
+  z-index: 4;
+}
diff --git a/app/components/shared/map_location_component.html.erb b/app/components/shared/map_location_component.html.erb
new file mode 100644
index 000000000..6a5084f95
--- /dev/null
+++ b/app/components/shared/map_location_component.html.erb
@@ -0,0 +1,5 @@
+<%= tag.div(id: dom_id(map_location), class: "map_location map", data: prepare_map_settings) %>
+
+<% if editable %>
+  <%= map_location_remove_marker %>
+<% end %>
diff --git a/app/components/shared/map_location_component.rb b/app/components/shared/map_location_component.rb
new file mode 100644
index 000000000..4b317c51e
--- /dev/null
+++ b/app/components/shared/map_location_component.rb
@@ -0,0 +1,62 @@
+class Shared::MapLocationComponent < ApplicationComponent
+  attr_reader :parent_class, :editable, :remove_marker_label, :investments_coordinates
+  delegate :map_location_input_id, to: :helpers
+
+  def initialize(map_location, parent_class, editable, remove_marker_label, investments_coordinates = nil)
+    @map_location = map_location
+    @parent_class = parent_class
+    @editable = editable
+    @remove_marker_label = remove_marker_label
+    @investments_coordinates = investments_coordinates
+  end
+
+  def map_location
+    @map_location ||= MapLocation.new
+  end
+
+  private
+
+    def map_location_latitude
+      map_location.latitude.presence || Setting["map.latitude"]
+    end
+
+    def map_location_longitude
+      map_location.longitude.presence || Setting["map.longitude"]
+    end
+
+    def map_location_zoom
+      map_location.zoom.presence || Setting["map.zoom"]
+    end
+
+    def map_location_remove_marker_link_id
+      "remove-marker-link-#{dom_id(map_location)}"
+    end
+
+    def map_location_remove_marker
+      tag.div class: "margin-bottom" do
+        link_to remove_marker_label, "#",
+          id: map_location_remove_marker_link_id,
+          class: "js-location-map-remove-marker location-map-remove-marker"
+      end
+    end
+
+    def prepare_map_settings
+      options = {
+        map: "",
+        map_center_latitude: map_location_latitude,
+        map_center_longitude: map_location_longitude,
+        map_zoom: map_location_zoom,
+        map_tiles_provider: Rails.application.secrets.map_tiles_provider,
+        map_tiles_provider_attribution: Rails.application.secrets.map_tiles_provider_attribution,
+        marker_editable: editable,
+        marker_remove_selector: "##{map_location_remove_marker_link_id}",
+        latitude_input_selector: "##{map_location_input_id(parent_class, "latitude")}",
+        longitude_input_selector: "##{map_location_input_id(parent_class, "longitude")}",
+        zoom_input_selector: "##{map_location_input_id(parent_class, "zoom")}",
+        marker_investments_coordinates: investments_coordinates
+      }
+      options[:marker_latitude] = map_location.latitude if map_location.latitude.present?
+      options[:marker_longitude] = map_location.longitude if map_location.longitude.present?
+      options
+    end
+end
diff --git a/app/helpers/map_locations_helper.rb b/app/helpers/map_locations_helper.rb
index 8bc28ce7d..1e6111b02 100644
--- a/app/helpers/map_locations_helper.rb
+++ b/app/helpers/map_locations_helper.rb
@@ -3,62 +3,11 @@ module MapLocationsHelper
     map_location.present? && map_location.available?
   end
 
-  def map_location_latitude(map_location)
-    map_location.latitude.presence || Setting["map.latitude"]
-  end
-
-  def map_location_longitude(map_location)
-    map_location.longitude.presence || Setting["map.longitude"]
-  end
-
-  def map_location_zoom(map_location)
-    map_location.zoom.presence || Setting["map.zoom"]
-  end
-
   def map_location_input_id(prefix, attribute)
     "#{prefix}_map_location_attributes_#{attribute}"
   end
 
-  def map_location_remove_marker_link_id(map_location)
-    "remove-marker-link-#{dom_id(map_location)}"
+  def render_map(...)
+    render Shared::MapLocationComponent.new(...)
   end
-
-  def render_map(map_location, parent_class, editable, remove_marker_label, investments_coordinates = nil)
-    map_location = MapLocation.new if map_location.nil?
-    map = tag.div id: dom_id(map_location),
-                  class: "map_location map",
-                  data: prepare_map_settings(map_location, editable, parent_class, investments_coordinates)
-    map += map_location_remove_marker(map_location, remove_marker_label) if editable
-    map
-  end
-
-  def map_location_remove_marker(map_location, text)
-    tag.div class: "margin-bottom" do
-      link_to text, "#",
-              id: map_location_remove_marker_link_id(map_location),
-              class: "js-location-map-remove-marker location-map-remove-marker"
-    end
-  end
-
-  private
-
-    def prepare_map_settings(map_location, editable, parent_class, investments_coordinates = nil)
-      options = {
-        map: "",
-        map_center_latitude: map_location_latitude(map_location),
-        map_center_longitude: map_location_longitude(map_location),
-        map_zoom: map_location_zoom(map_location),
-        map_tiles_provider: Rails.application.secrets.map_tiles_provider,
-        map_tiles_provider_attribution: Rails.application.secrets.map_tiles_provider_attribution,
-        marker_editable: editable,
-        marker_remove_selector: "##{map_location_remove_marker_link_id(map_location)}",
-        latitude_input_selector: "##{map_location_input_id(parent_class, "latitude")}",
-        longitude_input_selector: "##{map_location_input_id(parent_class, "longitude")}",
-        zoom_input_selector: "##{map_location_input_id(parent_class, "zoom")}",
-        marker_investments_coordinates: investments_coordinates
-      }
-      options[:marker_latitude] = map_location.latitude if map_location.latitude.present?
-      options[:marker_longitude] = map_location.longitude if map_location.longitude.present?
-      options
-    end
 end