Merged in try-gmaps (pull request #333)

Try gmaps

6 files changed, 112 insertions, 127 deletions

diff --git a/ab_openstreetmap/__manifest__.py b/ab_openstreetmap/__manifest__.py
index 745e57ab..9d76c34c 100644
--- a/ab_openstreetmap/__manifest__.py
+++ b/ab_openstreetmap/__manifest__.py
@@ -12,6 +12,6 @@
     'category': 'Uncategorized',
     'version': '0.1',
     'depends': ['base'],
-    "qweb": ['static/src/xml/openstreetmap_template.xml'],
+    "qweb": ['static/src/xml/googlemap_template.xml'],
     'data': ['views/templates.xml'],
 }
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..4c48d564
--- /dev/null
+++ b/ab_openstreetmap/static/src/js/googlemap_widget.js
@@ -0,0 +1,96 @@
+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._waitForElement("#mapid", async () => {
+        const apiKey = await rpc.query({
+          model: "ir.config_parameter",
+          method: "get_param",
+          args: ["google.maps.api_key"],
+        });
+        const mapId = await rpc.query({
+          model: "ir.config_parameter",
+          method: "get_param",
+          args: ["google.maps.map_id"],
+        });
+        this._loadGoogleMaps(apiKey, mapId);
+      });
+    },
+
+    _waitForElement: function (selector, callback) {
+      const el = document.querySelector(selector);
+      if (el && el.offsetHeight > 0 && el.offsetWidth > 0) {
+        callback();
+      } else {
+        setTimeout(() => this._waitForElement(selector, callback), 100);
+      }
+    },
+
+    _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&libraries=marker`;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => this._initMap(mapId);
+        document.head.appendChild(script);
+      } else {
+        this._initMap(mapId);
+      }
+    },
+
+    _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";
+
+      const mapEl = document.getElementById("mapid");
+      if (!mapEl) return;
+
+      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,
+      });
+
+      const marker = new AdvancedMarkerElement({
+        map,
+        position: { lat, lng },
+        gmpDraggable: edit,
+        title: "Lokasi",
+      });
+
+      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,
+          });
+        });
+      }
+    },
+
+    isSet: function () {
+      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..53aef261
--- /dev/null
+++ b/ab_openstreetmap/static/src/xml/googlemap_template.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+  <t t-name="googlemap_template">
+    <!-- <div id="mapid" style="height: 400px; width: 100%;"></div> -->
+    <div t-attf-id="mapid" style="height: 400px; width: 100%;" ></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
diff --git a/ab_openstreetmap/views/templates.xml b/ab_openstreetmap/views/templates.xml
index ed82ae84..1f5a729b 100644
--- a/ab_openstreetmap/views/templates.xml
+++ b/ab_openstreetmap/views/templates.xml
@@ -1,13 +1,9 @@
 <odoo>
-    <data>
-      <template id="assets_backend" inherit_id="web.assets_backend">
-        <xpath expr="." position="inside">
-          <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
-          <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
-          <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
-          <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
-          <script type="text/javascript" src="/ab_openstreetmap/static/src/js/openstreetmap_widget.js"/>
-        </xpath>
-      </template>
-    </data>
-</odoo>
\ No newline at end of file
+  <data>
+    <template id="assets_backend" inherit_id="web.assets_backend">
+      <xpath expr="." position="inside">
+        <script type="text/javascript" src="/ab_openstreetmap/static/src/js/googlemap_widget.js"/>
+      </xpath>
+    </template>
+  </data>
+</odoo>