FEATURE: functional contact page

resources/views/visitor/cwbs/modules/ContactForm/contact.blade.php

@@ -1,5 +1,6 @@
 @extendVisitor('defaultLayout')
 @section('content')
+
     <div class="grey-wrapper p-b-0">
         <div class="row column text-center m-b-25 show-for-large">
             <h2>Kontakt</h2>
@@ -17,7 +18,27 @@
                     e-mail: <a href="mailto:{{$page->module_settings->email}}">{{$page->module_settings->email}}</a></p>
                 <br>
             </div>
-            <iframe class="column large-12 medium-6 p-lr-0" src="https://www.google.cz/maps/place/50°04'29.''N+14°23'34.8''E" style="border:0" allowfullscreen="" frameborder="0" height="250" width="100%"></iframe>
+            <div id="map" class="column large-12 medium-6 p-lr-0" style="height: 250px;"></div>
+            <script type="text/javascript">
+                function initMap() {
+                    var myLatLng = {lat: parseInt('{{$page->module_settings->gpsLat}}'), lng: parseInt('{{$page->module_settings->gpsLng}}')};
+
+                    // Create a map object and specify the DOM element for display.
+                    var map = new google.maps.Map(document.getElementById('map'), {
+                        center: myLatLng,
+                        scrollwheel: false,
+                        zoom: 18
+                    });
+
+                    // Create a marker and set its position.
+                    var marker = new google.maps.Marker({
+                        map: map,
+                        position: myLatLng,
+                        title: '{{$page->module_settings->companyName}}'
+                    });
+                }
+            </script>
+            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjADMGOysqt0ibo9mD5Cr8rs47ZQF8rKQ&callback=initMap" async defer></script>
         </div>
         <div class="large-6 column green-wrapper p-25" id="contact-form">
             <div class="column large-12 medium-8 medium-centered p-lr-0 p-lr-50-sm">