(andri) fix deprecated fungsi maps pada module custom

2 files changed, 45 insertions, 68 deletions

diff --git a/ab_openstreetmap/static/src/js/googlemap_widget.js b/ab_openstreetmap/static/src/js/googlemap_widget.js
index 2c639bc3..61708486 100644
--- a/ab_openstreetmap/static/src/js/googlemap_widget.js
+++ b/ab_openstreetmap/static/src/js/googlemap_widget.js
@@ -10,103 +10,82 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) {
 
     start: async function () {
       await this._super(...arguments);
-
       const apiKey = await rpc.query({
         model: "ir.config_parameter",
         method: "get_param",
         args: ["google.maps.api_key"],
       });
-
-      this._waitForMapReady(apiKey);
+      this._waitForElement("#mapid", () => {
+        this._loadGoogleMaps(apiKey);
+      });
     },
 
-    _waitForMapReady(apiKey) {
-      const checkReady = () => {
-        const el = document.getElementById("mapid");
-        if (el && el.offsetHeight > 0 && el.offsetWidth > 0) {
-          this._loadGoogleMaps(apiKey);
-        } else {
-          setTimeout(checkReady, 150);
-        }
-      };
-      checkReady();
+    _waitForElement: function (selector, callback) {
+      const el = document.querySelector(selector);
+      if (el) {
+        callback();
+      } else {
+        setTimeout(() => this._waitForElement(selector, callback), 100);
+      }
     },
 
-    _loadGoogleMaps(apiKey) {
+    _loadGoogleMaps: function (apiKey) {
       if (!window.google || !window.google.maps) {
         const script = document.createElement("script");
-        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=marker`;
+        // script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=marker`;
+        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=beta&libraries=marker,maps`;
         script.async = true;
         script.defer = true;
-        script.onload = this._initMap.bind(this);
+        script.onload = async () => {
+          await this._initMap();
+        };
         document.head.appendChild(script);
       } else {
         this._initMap();
       }
     },
 
-    _initMap() {
+    _initMap: async function () {
       const lat = parseFloat(this.recordData.latitude) || -6.2;
       const lng = parseFloat(this.recordData.longtitude) || 106.816666;
-      const isEditable = this.mode === "edit";
+      const edit = this.mode === "edit";
 
-      const map = new google.maps.Map(document.getElementById("mapid"), {
+      const mapEl = document.getElementById("mapid");
+      if (!mapEl) return;
+
+      // ✅ Load required Google Maps libraries dynamically
+      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: "DEMO_MAP_ID", // optional, ganti kalau punya map ID khusus
       });
 
-      // Use AdvancedMarkerElement if available
-      if (google.maps.marker && google.maps.marker.AdvancedMarkerElement) {
-        const { AdvancedMarkerElement } = google.maps.marker;
-
-        const marker = new AdvancedMarkerElement({
-          position: { lat, lng },
-          map: map,
-          gmpDraggable: isEditable,
-        });
+      const marker = new AdvancedMarkerElement({
+        map,
+        position: { lat, lng },
+        title: "Lokasi",
+        gmpDraggable: edit,
+      });
 
-        if (isEditable) {
-          marker.addListener("dragend", (e) => {
-            const newLat = e.latLng.lat();
-            const newLng = e.latLng.lng();
-            this._saveCoords(newLat, newLng);
+      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,
           });
-        }
-      } else {
-        const marker = new google.maps.Marker({
-          position: { lat, lng },
-          map: map,
-          draggable: isEditable,
         });
-
-        if (isEditable) {
-          marker.addListener("dragend", (e) => {
-            const newLat = e.latLng.lat();
-            const newLng = e.latLng.lng();
-            this._saveCoords(newLat, newLng);
-          });
-        }
       }
-
-      // Handle resize if tab is hidden initially
-      setTimeout(() => {
-        google.maps.event.trigger(map, "resize");
-        map.setCenter({ lat, lng });
-      }, 500);
-    },
-
-    _saveCoords(lat, lng) {
-      this.trigger_up("field_changed", {
-        dataPointID: this.dataPointID,
-        changes: {
-          latitude: lat.toString(),
-          longtitude: lng.toString(),
-        },
-        viewType: this.viewType,
-      });
     },
 
-    isSet() {
+    isSet: function () {
       return true;
     },
   });
diff --git a/ab_openstreetmap/static/src/xml/googlemap_template.xml b/ab_openstreetmap/static/src/xml/googlemap_template.xml
index 845be418..3a80a4f2 100644
--- a/ab_openstreetmap/static/src/xml/googlemap_template.xml
+++ b/ab_openstreetmap/static/src/xml/googlemap_template.xml
@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
   <t t-name="googlemap_template">
-    <div class="o_google_map_wrapper" style="height: 400px; width: 100%;">
-      <div id="mapid" style="height: 100%; width: 100%;"></div>
-    </div>
+    <div id="mapid" style="height: 400px; width: 100%;"></div>
   </t>
 </templates>