autoinit: coordinate field (google maps)

laravolt · Sep 26, 2019 · c9c7874 · c9c7874
1 parent e72ed59
commit c9c7874
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/public/js/all.js b/public/js/all.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,6 +1,6 @@
 {
     "/css/app.css": "/css/app.css?id=9ccf21a457016100da27",
-    "/js/all.js": "/js/all.js?id=583560685927de9e3b48",
+    "/js/all.js": "/js/all.js?id=cba58a134834ca40beee",
     "/css/all.css": "/css/all.css?id=7b2e7f4696f2d3bf19b0",
     "/semantic/semantic.min.css": "/semantic/semantic.min.css?id=395cd6af3c3778570b67"
 }
diff --git a/resources/js/init/ui.js b/resources/js/init/ui.js
@@ -296,6 +296,47 @@ $(function () {
       });
     });
   }
+
+
+  if (typeof google === 'object' && typeof google.maps === 'object') {
+    $('[data-form-coordinate]').each(function () {
+      var input = $(this);
+      var long, lat;
+      [lat, long] = input.val().split(',');
+      lat = lat || -7.451808;
+      long = long || 111.035929;
+
+      var mapContainer = $('<div>')
+        .css('width', '100%')
+        .css('height', 300)
+        .css('border-radius', 4)
+        .css('margin-top', '5px');
+
+      mapContainer.insertAfter($(this));
+
+      var center = new google.maps.LatLng(lat, long);
+      var options = {
+        zoom: 17,
+        center: center,
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      }
+      var map = new google.maps.Map(mapContainer[0], options);
+
+      var marker = new google.maps.Marker({
+        position: center,
+        map: map,
+        draggable: true
+      });
+      google.maps.event.addListener(
+        marker,
+        'drag',
+        function () {
+          input.val(marker.position.lat() + ',' + marker.position.lng());
+        }
+      );
+    });
+  }
+
 });