{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-base-google-maps" %}
{% set title = "Google Maps" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

{% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-base.njk" %}

    <section>
      <div class="g-py-100">
        <div class="container">
          <!-- Google Map Roadmap -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Google Map Roadmap</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode1">
                <div class="shortcode-html">
                  <div id="GMapRoadmap" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-lat="40.748866"
                       data-lng="-73.988366"
                       data-pin="true"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode1" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Google Map Roadmap -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Google Map Satellite -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Google Map Satellite</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode2">
                <div class="shortcode-html">
                  <div id="GMapSatellite" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-type="satellite"
                       data-lat="40.748866"
                       data-lng="-73.988366"
                       data-title="HTMLSTREAM"
                       data-pin="true"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode2" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Google Map Satellite -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Google Map Terrain -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Google Map Terrain</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode3">
                <div class="shortcode-html">
                  <div id="GMapTerrain" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-type="terrain"
                       data-lat="40.748866"
                       data-lng="-73.988366"
                       data-title="HTMLSTREAM"
                       data-pin="true"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode3" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Google Map Terrain -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Google Map Street View -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Google Map Street View</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode4">
                <div class="shortcode-html">
                  <div id="GMapStreetView" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-type="street-view"
                       data-lat="40.748866"
                       data-lng="-73.988366"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode4" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Google Map Street View -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Customized GMap: Light -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Customized GMap: Light</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode5">
                <div class="shortcode-html">
                  <div id="GMapCustomized-light" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-type="custom"
                       data-lat="40.674"
                       data-lng="-73.946"
                       data-zoom="12"
                       data-title="Agency"
                       data-styles='[
                           ["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]],
                           ["", "labels", [{"visibility":"on"}]],
                           ["water", "", [{"color":"#bac6cb"}]]
                         ]'
                       data-pin="true"
                       data-pin-icon="{{ root }}assets/img/icons/pin/green.png"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode5" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Customized GMap: Light -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Customized GMap: Dark -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Customized GMap: Dark</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode6">
                <div class="shortcode-html">
                  <div id="GMapCustomized-dark" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-type="custom"
                       data-lat="40.674"
                       data-lng="-73.946"
                       data-zoom="12"
                       data-title="Event"
                       data-styles='[
                           ["", "", [{"saturation":-100},{"lightness":50},{"visibility":"simplified"}]],
                           ["", "geometry", [{"color":"#1e303d"}]],
                           ["road", "", [{"color":"#ffffff"},{"lightness":-100}]],
                           ["road", "labels.text.fill", [{"color":"#ffffff"},{"lightness":-50}]],
                           ["water", "", [{"color":"#0e171d"}]]
                         ]'
                       data-pin="true"
                       data-pin-icon="{{ root }}assets/img/icons/pin/red.png"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode6" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Customized GMap: Dark -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Google Map Geolocation -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Google Map Geolocation</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode7">
                <div class="shortcode-html">
                  <div id="GMapGeolocation" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-lat="40.748866"
                       data-lng="-73.988366"
                       data-zoom="16"
                       data-geolocation="true"
                       data-title="HTMLSTREAM"
                       data-pin="true"
                       data-pin-icon="{{ root }}assets/img/icons/pin/green.png"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode7" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Google Map Geolocation -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Google Map Polygon -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Google Map Polygon</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode8">
                <div class="shortcode-html">
                  <div id="GMapPolygon" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-lat="-12.043333"
                       data-lng="-77.028333"
                       data-zoom="14"
                       data-polygon="true"
                       data-polygon-cords="[
                           [-12.040397656836609,-77.03373871559225],
                           [-12.040248585302038,-77.03993927003302],
                           [-12.050047116528843,-77.02448169303511],
                           [-12.044804866577001,-77.02154422636042]
                         ]"
                       data-polygon-styles='{"strokeColor":"#BBD8E9","strokeOpacity":1,"strokeWeight":3,"fillColor":"#BBD8E9","fillOpacity":0.6}'
                       data-pin="true"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode8" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Google Map Polygon -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Google Map Polylines -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Google Map Polylines</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode9">
                <div class="shortcode-html">
                  <div id="GMapPolylines" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-lat="-12.043333"
                       data-lng="-77.028333"
                       data-zoom="14"
                       data-polylines="true"
                       data-polylines-cords="[
                           [-12.044012922866312, -77.02470665341184],
                           [-12.05449279282314, -77.03024273281858],
                           [-12.055122327623378, -77.03039293652341],
                           [-12.075917129727586, -77.02764635449216],
                           [-12.07635776902266, -77.02792530422971],
                           [-12.076819390363665, -77.02893381481931],
                           [-12.088527520066453, -77.0241058385925],
                           [-12.090814532191756, -77.02271108990476]
                         ]"
                       data-polylines-styles='{"strokeColor":"#131540","strokeOpacity":0.6,"strokeWeight":6}'
                       data-pin="true"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode9" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Google Map Polylines -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Google Map Routes -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Google Map Routes</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode10">
                <div class="shortcode-html">
                  <div id="GMapRoutes" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-lat="-12.043333"
                       data-lng="-77.028333"
                       data-zoom="14"
                       data-routes="true"
                       data-routes-cords="[
                         [-12.044012922866312, -77.02470665341184],
                         [-12.090814532191756, -77.02271108990476]
                       ]"
                       data-routes-styles='{"travelMode":"driving","strokeColor":"#131540","strokeOpacity":0.6,"strokeWeight":6}'
                       data-pin="true"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode10" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Google Map Routes -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Google Map Geocoding -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Google Map Geocoding</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode11">
                <div class="shortcode-html">
                  <form id="GMapGeocodingForm" class="g-mb-30">
                    <div class="input-group g-brd-primary--focus g-mb-30">
                      <input id="GMapGeocodingAddress" class="form-control rounded-0 u-form-control" type="text" placeholder="Enter address">

                      <div class="input-group-addon p-0 g-brd-primary">
                        <button class="btn rounded-0 btn-primary btn-md g-font-weight-700 g-font-size-14" type="submit">Submit</button>
                      </div>
                    </div>
                  </form>

                  <div id="GMapGeocoding" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-lat="-12.043333"
                       data-lng="-77.028333"
                       data-zoom="14"
                       data-geocoding="true"
                       data-cords-target="#GMapGeocodingAddress"
                       data-pin="true"
                       data-pin-icon="{{ root }}assets/img/icons/pin/green.png"></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode11" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Google Map Geocoding -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Google Map Multiple Markers -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-30">Google Map Multiple Markers</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode12">
                <div class="shortcode-html">
                  <div id="GMapMultipleMarkers" class="js-g-map embed-responsive embed-responsive-21by9"
                       data-type="terrain"
                       data-lat="-33.92"
                       data-lng="151.25"
                       data-zoom="10"
                       data-multiple-markers="true"
                       data-markers-locations='[
                         ["Bondi Beach", -33.890542, 151.274856, 4],
                         ["Coogee Beach", -33.923036, 151.259052, 5],
                         ["Cronulla Beach", -34.028249, 151.157507, 3],
                         ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
                         ["Maroubra Beach", -33.950198, 151.259302, 1]
                       ]'></div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    // initialization of google map
                    function initMap() {
                      $.HSCore.components.HSGMap.init('.js-g-map');
                    }
                  </script>

                  <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
                </div>
              </div>

              {% set contentTarget = "#shortcode12" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Google Map Multiple Markers -->
        </div>
      </div>
    </section>

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
  <script src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

  <!-- jQuery UI Helpers -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>

  <!-- jQuery UI Widgets -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>

  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>

  <script src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
  <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>

  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

  <!-- JS Custom -->
  <script src="{{ root }}assets/js/custom.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    // initialization of google map
    function initMap() {
      $.HSCore.components.HSGMap.init('.js-g-map');
    }

    $(document).on('ready', function () {
      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');
    });

    $(window).on('load', function () {
      // initialization of header
      $.HSCore.components.HSHeader.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');
      $.HSCore.components.HSHeaderSide.init($('#sideNav'));

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

      // initialization of HSMegaMenu plugin
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>

  <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
</body>
</html>
