1 files changed, 133 insertions, 0 deletions
diff --git a/ab_openstreetmap/static/src/js/googlemap_widget.js b/ab_openstreetmap/static/src/js/googlemap_widget.js
new file mode 100644
index 00000000..6471be0b
--- /dev/null
+++ b/ab_openstreetmap/static/src/js/googlemap_widget.js
@@ -0,0 +1,133 @@
+odoo.define("ab_openstreetmap.googlemap_widget", function (require) {
+  "use strict";
+
+  const AbstractField = require("web.AbstractField");
+  const fieldRegistry = require("web.field_registry");
+  const rpc = require("web.rpc");
+
+  const GoogleMapWidget = AbstractField.extend({
+    template: "googlemap_template",
+
+    start: async function () {
+      await this._super(...arguments);
+      this._waitForMapReady();
+    },
+
+    on_attach_callback: function () {
+      this._waitForMapReady(); // Trigger ulang saat widget dimunculkan
+    },
+
+    _waitForMapReady: function () {
+      const mapEl = document.getElementById("mapid");
+      if (mapEl && mapEl.offsetWidth > 0 && mapEl.offsetHeight > 0) {
+        this._loadGoogle();
+      } else {
+        setTimeout(() => this._waitForMapReady(), 300); // Tambah jeda untuk mode edit/tab
+      }
+    },
+
+    async _loadGoogle() {
+      const apiKey = "AIzaSyB7bG9aSNAJnSrj0Z7f1abFsqKVoiJfsPE"; // Ganti sesuai kebutuhan
+      const mapId = "1af072c8d80a2adec8057f34"; // Ganti sesuai kebutuhan
+
+      if (!window.google || !window.google.maps) {
+        const script = document.createElement("script");
+        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly&libraries=places,marker`;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => this._initMap(mapId);
+        document.head.appendChild(script);
+      } else {
+        this._initMap(mapId);
+      }
+    },
+
+    async _initMap(mapId) {
+      const lat = parseFloat(this.recordData.latitude) || -6.2;
+      const lng = parseFloat(this.recordData.longtitude) || 106.816666;
+      const edit = this.mode === "edit";
+      const mapEl = document.getElementById("mapid");
+      if (!mapEl) return;
+
+      mapEl.style.position = "relative";
+      mapEl.style.minHeight = "400px"; // Pastikan map tidak collapse
+
+      const { Map } = await google.maps.importLibrary("maps");
+      const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+
+      const map = new Map(mapEl, {
+        center: { lat, lng },
+        zoom: 15,
+        mapId: mapId || undefined,
+      });
+
+      // Trigger resize untuk menangani kasus map awalnya hidden
+      setTimeout(() => {
+        google.maps.event.trigger(map, "resize");
+        map.setCenter({ lat, lng }); // Reset ulang posisi setelah resize
+      }, 300);
+
+      const marker = new AdvancedMarkerElement({
+        map,
+        position: { lat, lng },
+        gmpDraggable: edit,
+        title: "Lokasi",
+      });
+
+      if (edit) {
+        marker.addListener("dragend", () => {
+          const pos = marker.position;
+          this._updateCoordinates(pos.lat, pos.lng);
+        });
+
+        // Tambahkan input search
+        const input = document.createElement("input");
+        input.type = "text";
+        input.placeholder = "Cari alamat...";
+        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);
+
+        const autocomplete = new google.maps.places.Autocomplete(input);
+        autocomplete.addListener("place_changed", () => {
+          const place = autocomplete.getPlace();
+          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;
+    },
+  });
+
+  fieldRegistry.add("googlemap", GoogleMapWidget);
+});