1 files changed, 37 insertions, 25 deletions

diff --git a/ab_openstreetmap/static/src/js/googlemap_widget.js b/ab_openstreetmap/static/src/js/googlemap_widget.js
index ebbffa1d..e13fac61 100644
--- a/ab_openstreetmap/static/src/js/googlemap_widget.js
+++ b/ab_openstreetmap/static/src/js/googlemap_widget.js
@@ -53,6 +53,8 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) {
       const mapEl = document.getElementById("mapid");
       if (!mapEl) return;
 
+      mapEl.style.position = "relative";
+
       const { Map } = await google.maps.importLibrary("maps");
       const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
 
@@ -72,44 +74,54 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) {
       if (edit) {
         marker.addListener("dragend", () => {
           const pos = marker.position;
-          this.trigger_up("field_changed", {
-            dataPointID: this.dataPointID,
-            changes: {
-              latitude: pos.lat.toString(),
-              longtitude: pos.lng.toString(),
-            },
-            viewType: this.viewType,
-          });
+          this._updateCoordinates(pos.lat, pos.lng);
         });
 
-        // Search Box (autocomplete)
+        // Tambahkan input search
         const input = document.createElement("input");
         input.type = "text";
         input.placeholder = "Cari alamat...";
-        input.style = "width: 100%; padding: 8px; margin-bottom: 10px;";
-        mapEl.parentNode.insertBefore(input, mapEl);
-
+        input.id = "search-input";
+        input.style.cssText = `
+          position: absolute;
+          top: 10px;
+          left: 50%;
+          transform: translateX(-50%);
+          z-index: 5;
+          width: 300px;
+          padding: 6px;
+          font-size: 14px;
+          border-radius: 4px;
+          border: 1px solid #ccc;
+          background: white;
+        `;
+        mapEl.appendChild(input);
+
+        // Gunakan Autocomplete klasik (deprecated tapi stabil)
         const autocomplete = new google.maps.places.Autocomplete(input);
         autocomplete.addListener("place_changed", () => {
           const place = autocomplete.getPlace();
-          if (place.geometry) {
-            const loc = place.geometry.location;
-            map.setCenter(loc);
-            marker.position = loc;
-
-            this.trigger_up("field_changed", {
-              dataPointID: this.dataPointID,
-              changes: {
-                latitude: loc.lat().toString(),
-                longtitude: loc.lng().toString(),
-              },
-              viewType: this.viewType,
-            });
+          if (place && place.geometry && place.geometry.location) {
+            const pos = place.geometry.location;
+            map.setCenter(pos);
+            marker.position = pos;
+            this._updateCoordinates(pos.lat(), pos.lng());
           }
         });
       }
     },
 
+    _updateCoordinates(lat, lng) {
+      this.trigger_up("field_changed", {
+        dataPointID: this.dataPointID,
+        changes: {
+          latitude: lat.toString(),
+          longtitude: lng.toString(),
+        },
+        viewType: this.viewType,
+      });
+    },
+
     isSet() {
       return true;
     },