Initialize only visible maps when page is loaded

Its known that initializing a map when it is inside a hidden element
wont work when hidden element is shown, so its makes sense to
avoid initialization of hidden maps.

When a map lives within a hidden layer we need to initialize the
map after the event of showing that hidden layer, in our case when
admin settings tab is shown.

app/assets/javascripts/map.js

@@ -2,7 +2,7 @@
   "use strict";
   App.Map = {
     initialize: function() {
-      $("*[data-map]").each(function() {
+      $("*[data-map]:visible").each(function() {
         App.Map.initializeMap(this);
       });
       $(".js-toggle-map").on({

spec/system/admin/settings_spec.rb

@@ -30,6 +30,30 @@ describe "Admin settings" do
     expect(page).to have_content "Value updated"
   end
 
+  describe "Map settings initialization", :js do
+    before do
+      Setting["feature.map"] = true
+    end
+
+    scenario "When `Map settings` tab content is hidden map should not be initialized" do
+      admin = create(:administrator).user
+      login_as(admin)
+      visit admin_settings_path
+
+      expect(page).not_to have_css("#admin-map.leaflet-container", visible: false)
+    end
+
+    scenario "When `Map settings` tab content is shown map should be initialized" do
+      admin = create(:administrator).user
+      login_as(admin)
+      visit admin_settings_path
+
+      find("#map-tab").click
+
+      expect(page).to have_css("#admin-map.leaflet-container", visible: true)
+    end
+  end
+
   describe "Update map" do
     scenario "Should not be able when map feature deactivated" do
       Setting["feature.map"] = false