(andri) migrate marker to advancedMarker pada module gmaps

1 files changed, 23 insertions, 16 deletions

diff --git a/ab_openstreetmap/static/src/js/googlemap_widget.js b/ab_openstreetmap/static/src/js/googlemap_widget.js
index f8cafb4b..4c48d564 100644
--- a/ab_openstreetmap/static/src/js/googlemap_widget.js
+++ b/ab_openstreetmap/static/src/js/googlemap_widget.js
@@ -17,7 +17,12 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) {
           method: "get_param",
           args: ["google.maps.api_key"],
         });
-        this._loadGoogleMaps(apiKey);
+        const mapId = await rpc.query({
+          model: "ir.config_parameter",
+          method: "get_param",
+          args: ["google.maps.map_id"],
+        });
+        this._loadGoogleMaps(apiKey, mapId);
       });
     },
 
@@ -30,20 +35,20 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) {
       }
     },
 
-    _loadGoogleMaps: function (apiKey) {
+    _loadGoogleMaps: function (apiKey, mapId) {
       if (!window.google || !window.google.maps) {
         const script = document.createElement("script");
-        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly`;
+        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly&libraries=marker`;
         script.async = true;
         script.defer = true;
-        script.onload = () => this._initMap();
+        script.onload = () => this._initMap(mapId);
         document.head.appendChild(script);
       } else {
-        this._initMap();
+        this._initMap(mapId);
       }
     },
 
-    _initMap: function () {
+    _initMap: async function (mapId) {
       const lat = parseFloat(this.recordData.latitude) || -6.2;
       const lng = parseFloat(this.recordData.longtitude) || 106.816666;
       const edit = this.mode === "edit";
@@ -51,28 +56,30 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) {
       const mapEl = document.getElementById("mapid");
       if (!mapEl) return;
 
-      // Bersihkan inner map jika sudah pernah load sebelumnya
-      mapEl.innerHTML = "";
+      const { Map } = await google.maps.importLibrary("maps");
+      const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
 
-      const map = new google.maps.Map(mapEl, {
+      const map = new Map(mapEl, {
         center: { lat, lng },
         zoom: 15,
+        mapId: mapId,
       });
 
-      const marker = new google.maps.Marker({
-        position: { lat, lng },
+      const marker = new AdvancedMarkerElement({
         map,
-        draggable: edit,
+        position: { lat, lng },
+        gmpDraggable: edit,
+        title: "Lokasi",
       });
 
       if (edit) {
-        marker.addListener("dragend", (e) => {
-          const pos = e.latLng;
+        marker.addListener("dragend", () => {
+          const pos = marker.position;
           this.trigger_up("field_changed", {
             dataPointID: this.dataPointID,
             changes: {
-              latitude: pos.lat().toString(),
-              longtitude: pos.lng().toString(),
+              latitude: pos.lat.toString(),
+              longtitude: pos.lng.toString(),
             },
             viewType: this.viewType,
           });