google maps, map fullsize

_config.yml

@@ -19,7 +19,9 @@ changelog-url: https://github.com/tabler/tabler/releases
 sponsor-url: https://github.com/sponsors/codecalm
 preview-url: https://preview.tabler.io
 
-mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
+mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
+google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
+google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
 
 debug: false
 

src/pages/_data/libs.json

@@ -22,7 +22,8 @@
     "nouislider": "nouislider/distribute/nouislider.min.js",
     "countup": "countup.js/dist/countUp.js",
     "masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
-    "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"
+    "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",
+    "google-maps": "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY"
   },
   "css": {
     "jqvmap": "jqvmap/dist/jqvmap.min.css",

src/pages/_data/menu.yml

@@ -35,6 +35,9 @@ base:
     maps:
       url: maps.html
       title: Maps
+    map-fullsize:
+      url: map-fullsize.html
+      title: Map fullsize
     maps-vector:
       url: maps-vector.html
       title: Vector maps

src/pages/_includes/layout/js.html

@@ -1,10 +1,15 @@
 <!-- Libs JS -->
 {% assign libs = page.libs | default: layout.libs %}
 
+{% assign google-maps-key = site.google-maps-dev-key %}
+{% if jekyll.environment == 'preview' %}
+	{% assign google-maps-key = site.google-maps-key %}
+{% endif %}
+
 {% for lib in site.data.libs.js %}
 	{% if libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
 		{% for file in lib[1] %}
-		<script src="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment != 'development' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment != 'development' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}{% endif %}"></script>
+		<script src="{% if file contains 'http://' or file contains 'https://' %}{{ file | replace: 'GOOGLE_MAPS_KEY', google-maps-key }}{% else %}{{ site.base }}/{% if jekyll.environment != 'development' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment != 'development' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}{% endif %}"></script>
 		{% endfor %}
 	{% endif %}
 {% endfor %}

src/pages/_includes/ui/map.html

@@ -14,7 +14,7 @@
 		{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
 
 		document.addEventListener("DOMContentLoaded", function() {
-			mapboxgl.accessToken = '{{ site.mapbox_key }}';
+			mapboxgl.accessToken = '{{ site.mapbox-key }}';
 			var map = new mapboxgl.Map({
 				container: 'map-{{ id }}',
 				style: 'mapbox://styles/mapbox/{{ data.style | default: "streets-v11" }}',

src/pages/_layouts/default.html

@@ -2,23 +2,27 @@
 layout: base
 ---
 
-{% if page.layout-sidebar %}
-	{% include layout/sidebar.html dark=page.layout-sidebar-dark right=page.layout-sidebar-right transparent=page.layout-navbar-transparent breakpoint="lg" %}
-{% endif %}
-
 <div class="page">
+	{% if page.layout-sidebar %}
+	{% include layout/sidebar.html dark=page.layout-sidebar-dark right=page.layout-sidebar-right transparent=page.layout-navbar-transparent breakpoint="lg" %}
+	{% endif %}
+
 	{% unless page.layout-hide-topbar %}
 		{% include layout/navbar.html condensed=page.layout-navbar-condensed overlap=page.layout-navbar-overlap dark=page.layout-navbar-dark hide-brand=page.layout-navbar-hide-brand hide-menu=page.layout-navbar-hide-menu sticky=page.layout-navbar-sticky  class=page.layout-navbar-class %}
 	{% endunless %}
 
 
-	<div class="content">
-		<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
-			{% include layout/page-header.html %}
-
+	<div class="content{% if page.layout-content-full %} m-0{% endif %}">
+		{% if page.layout-content-full %}
 			{{ content }}
-		</div>
+		{% else %}
+			<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
+				{% include layout/page-header.html %}
 
-		{% include layout/footer.html %}
+				{{ content }}
+			</div>
+
+			{% include layout/footer.html %}
+		{% endif %}
 	</div>
 </div>

src/pages/map-fullsize.html

@@ -0,0 +1,30 @@
+---
+layout: default
+libs: google-maps
+layout-content-full: true
+layout-sidebar: true
+layout-hide-topbar: true
+menu: base.map-fullsize
+---
+
+{% assign map-id = 'google' %}
+
+<div class="map flex-fill" id="map-{{ map-id }}"></div>
+
+{% capture_global scripts %}
+<script>
+	// @formatter:off
+	let map;
+	{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
+
+	document.addEventListener("DOMContentLoaded", function() {
+		map = new google.maps.Map(document.getElementById("map-{{ map-id }}"), {
+			center: { lat: -34.397, lng: 150.644 },
+			zoom: 8,
+		});
+
+		{% if jekyll.environment == 'development' %}window.tabler_map["map-{{ map-id }}"] = map;{% endif %}
+	});
+// @formatter:on
+</script>
+{% endcapture_global %}

src/scss/layout/_navbar.scss

@@ -228,6 +228,14 @@ Navbar
               border-bottom-width: 2px;
             }
           }
+
+          &.navbar-vertical {
+            box-shadow: inset -1px 0 0 0 $navbar-light-border-color;
+
+            &.navbar-right {
+              box-shadow: inset 1px 0 0 0 $navbar-light-border-color;
+            }
+          }
         }
       }
     }
@@ -312,14 +320,6 @@ Navbar light
 .navbar-light {
   box-shadow: inset 0 -1px 0 0 $navbar-light-border-color;
   background-color: $white;
-
-  &.navbar-vertical {
-    box-shadow: inset -1px 0 0 0 $navbar-light-border-color;
-
-    &.navbar-right {
-      box-shadow: inset 1px 0 0 0 $navbar-light-border-color;
-    }
-  }
 }
 
 /**