Merge pull request #117 from Kentico/map-fix

Fix map component javascript
kontent-ai · Nov 16, 2020 · df5b021 · df5b021
2 parents 7f069cf + c7bc91e
commit df5b021
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/DancingGoat/Views/Cafes/Index.cshtml b/DancingGoat/Views/Cafes/Index.cshtml
@@ -26,5 +26,5 @@
 @section Scripts
 {
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVOq4C-rf7JVeHt6ws9vsf-KHIRpueASg"></script>
-    <script src="~/Scripts/map.js"></script>
+    <script src="~/js/map.js"></script>
 }
diff --git a/DancingGoat/Views/Contacts/Index.cshtml b/DancingGoat/Views/Contacts/Index.cshtml
@@ -31,5 +31,5 @@
 
 @section Scripts {
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVOq4C-rf7JVeHt6ws9vsf-KHIRpueASg"></script>
-    <script src="~/Scripts/map.js"></script>
+    <script src="~/js/map.js"></script>
 }
diff --git a/DancingGoat/wwwroot/js/map.js b/DancingGoat/wwwroot/js/map.js
@@ -0,0 +1,58 @@
+(function () {
+    var geocoder;
+    var map;
+    var markers = {};
+    var bounds = new google.maps.LatLngBounds();
+    var mapElement = jQuery('div.js-map');
+
+    function initialize() {
+        geocoder = new google.maps.Geocoder();
+        var mapOptions = {
+            mapTypeId: google.maps.MapTypeId.ROADMAP,
+            mapTypeControl: true,
+            scaleControl: true,
+            panControl: true,
+            streetViewControl: true,
+            zoomControl: true,
+            keyboardShortcuts: false,
+            draggable: true,
+            zoomControlOptions: {
+                style: google.maps.ZoomControlStyle.DEFAULT
+            }
+        };
+        map = new google.maps.Map(mapElement[0], mapOptions);
+        jQuery('.js-scroll-to-map').each(function () {
+            var address = jQuery(this).attr('data-address');
+            addMarker(address);
+            jQuery(this).click(function () {
+                panToMarker(address);
+            });
+        });
+    }
+
+    function panToMarker(address) {
+        jQuery('html, body').animate({
+            scrollTop: mapElement.offset().top
+        }, 500);
+        map.setZoom(17);
+        map.panTo(markers[address].position);
+    }
+
+    function addMarker(address) {
+        geocoder.geocode({ 'address': address }, function (results, status) {
+            if (status == google.maps.GeocoderStatus.OK) {
+                var marker = new google.maps.Marker({
+                    map: map,
+                    position: results[0].geometry.location
+                });
+                markers[address] = marker;
+                bounds.extend(marker.getPosition());
+                map.fitBounds(bounds);
+            } else {
+                console.warn('Geocode was not successful for the following reason: ' + status);
+            }
+        });
+    }
+
+    google.maps.event.addDomListener(window, 'load', initialize);
+}());