(andri) try gmaps sebagai pengganti openstreetmaps

4 files changed, 123 insertions, 114 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..2c639bc3
--- /dev/null
+++ b/ab_openstreetmap/static/src/js/googlemap_widget.js
@@ -0,0 +1,115 @@
+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);
+
+      const apiKey = await rpc.query({
+        model: "ir.config_parameter",
+        method: "get_param",
+        args: ["google.maps.api_key"],
+      });
+
+      this._waitForMapReady(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();
+    },
+
+    _loadGoogleMaps(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.async = true;
+        script.defer = true;
+        script.onload = this._initMap.bind(this);
+        document.head.appendChild(script);
+      } else {
+        this._initMap();
+      }
+    },
+
+    _initMap() {
+      const lat = parseFloat(this.recordData.latitude) || -6.2;
+      const lng = parseFloat(this.recordData.longtitude) || 106.816666;
+      const isEditable = this.mode === "edit";
+
+      const map = new google.maps.Map(document.getElementById("mapid"), {
+        center: { lat, lng },
+        zoom: 15,
+      });
+
+      // 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,
+        });
+
+        if (isEditable) {
+          marker.addListener("dragend", (e) => {
+            const newLat = e.latLng.lat();
+            const newLng = e.latLng.lng();
+            this._saveCoords(newLat, newLng);
+          });
+        }
+      } 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() {
+      return true;
+    },
+  });
+
+  fieldRegistry.add("googlemap", GoogleMapWidget);
+});
diff --git a/ab_openstreetmap/static/src/js/openstreetmap_widget.js b/ab_openstreetmap/static/src/js/openstreetmap_widget.js
deleted file mode 100644
index c84a2293..00000000
--- a/ab_openstreetmap/static/src/js/openstreetmap_widget.js
+++ /dev/null
@@ -1,106 +0,0 @@
-odoo.define("ab_openstreetmap.openstreetmap_widget", function (require) {
-  "use strict";
-
-  const fieldRegistry = require("web.field_registry");
-  const AbstractField = require("web.AbstractField");
-
-  const OpenStreetMapWidget = AbstractField.extend({
-    template: "openstreetmap_template",
-
-    start: function () {
-      const self = this;
-      return this._super.apply(this, arguments).then(() => {
-        setTimeout(() => {
-          self._renderMapWhenReady();
-        }, 100);
-      });
-    },
-
-    _renderMapWhenReady: function () {
-      const self = this;
-      const check = () => {
-        const container = document.getElementById("mapid");
-        if (container && container.offsetWidth > 0 && container.offsetHeight > 0) {
-          self._initMap();
-        } else {
-          setTimeout(check, 100);
-        }
-      };
-      check();
-    },
-
-    _initMap: function () {
-      const self = this;
-      const container = document.getElementById("mapid");
-
-      // Bersihkan Leaflet instance sebelumnya jika ada
-      if (container && container._leaflet_id) {
-        container._leaflet_id = null;
-      }
-
-      let lat = self.recordData.latitude;
-      let lng = self.recordData.longtitude;
-
-      if (!lat && !lng) {
-        lat = -6.2349;
-        lng = 106.9896;
-      }
-
-      const map = L.map("mapid").setView([lat, lng], 13);
-
-      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-        attribution:
-          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-      }).addTo(map);
-
-      const edit = self.mode === "edit";
-      const marker = L.marker([lat, lng], { draggable: edit }).addTo(map);
-
-      // Simpan koordinat saat marker digeser
-      marker.on("dragend", function (e) {
-        const latlng = e.target._latlng;
-        self.trigger_up("field_changed", {
-          dataPointID: self.dataPointID,
-          changes: {
-            latitude: latlng.lat.toString(),
-            longtitude: latlng.lng.toString(),
-          },
-          viewType: self.viewType,
-        });
-      });
-
-      // Fitur cari lokasi (geocoder)
-      if (edit) {
-        const geocode = L.Control.geocoder({ defaultMarkGeocode: false }).addTo(map);
-        geocode.on("markgeocode", function (e) {
-          const lat = e.geocode.center.lat;
-          const lng = e.geocode.center.lng;
-          map.flyTo([lat, lng]);
-          marker.setLatLng(new L.LatLng(lat, lng));
-          self.trigger_up("field_changed", {
-            dataPointID: self.dataPointID,
-            changes: {
-              latitude: lat.toString(),
-              longtitude: lng.toString(),
-            },
-            viewType: self.viewType,
-          });
-        });
-      }
-
-      // Force render ulang map
-      const interval = setInterval(() => {
-        if (map && map._size.x > 0) {
-          clearInterval(interval);
-        }
-        window.dispatchEvent(new Event("resize"));
-      }, 500);
-    },
-
-    isSet: function () {
-      return true;
-    },
-  });
-
-  fieldRegistry.add("openstreetmap", OpenStreetMapWidget);
-});
diff --git a/ab_openstreetmap/static/src/xml/googlemap_template.xml b/ab_openstreetmap/static/src/xml/googlemap_template.xml
new file mode 100644
index 00000000..845be418
--- /dev/null
+++ b/ab_openstreetmap/static/src/xml/googlemap_template.xml
@@ -0,0 +1,8 @@
+<?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>
+  </t>
+</templates>
diff --git a/ab_openstreetmap/static/src/xml/openstreetmap_template.xml b/ab_openstreetmap/static/src/xml/openstreetmap_template.xml
deleted file mode 100644
index 82672748..00000000
--- a/ab_openstreetmap/static/src/xml/openstreetmap_template.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-    <t t-name="openstreetmap_template">
-        <div style="width:100%">
-            <div id="mapid" style="height: 500px;"/>
-        </div>
-    </t>
-</templates>
\ No newline at end of file