Merged in try-gmaps (pull request #333)

Try gmaps

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