(andri) try gmaps sebagai pengganti openstreetmaps

1 files changed, 115 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..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);
+});