From a921017a829ebef8442740fac964260d98566e6a Mon Sep 17 00:00:00 2001 From: "Indoteknik ." Date: Thu, 12 Jun 2025 19:26:46 +0700 Subject: (andri) try gmaps sebagai pengganti openstreetmaps --- ab_openstreetmap/static/src/js/googlemap_widget.js | 115 +++++++++++++++++++++ .../static/src/js/openstreetmap_widget.js | 106 ------------------- .../static/src/xml/googlemap_template.xml | 8 ++ .../static/src/xml/openstreetmap_template.xml | 8 -- 4 files changed, 123 insertions(+), 114 deletions(-) create mode 100644 ab_openstreetmap/static/src/js/googlemap_widget.js delete mode 100644 ab_openstreetmap/static/src/js/openstreetmap_widget.js create mode 100644 ab_openstreetmap/static/src/xml/googlemap_template.xml delete mode 100644 ab_openstreetmap/static/src/xml/openstreetmap_template.xml (limited to 'ab_openstreetmap/static/src') 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: - '© OpenStreetMap 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 @@ + + + +
+
+
+ + 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 @@ - - - -
-
-
- - \ No newline at end of file -- cgit v1.2.3 From 34759639fa2db3b28bac410e24984775ce823ac5 Mon Sep 17 00:00:00 2001 From: "Indoteknik ." Date: Fri, 13 Jun 2025 08:44:56 +0700 Subject: (andri) fix deprecated fungsi maps pada module custom --- ab_openstreetmap/static/src/js/googlemap_widget.js | 109 +++++++++------------ .../static/src/xml/googlemap_template.xml | 4 +- 2 files changed, 45 insertions(+), 68 deletions(-) (limited to 'ab_openstreetmap/static/src') diff --git a/ab_openstreetmap/static/src/js/googlemap_widget.js b/ab_openstreetmap/static/src/js/googlemap_widget.js index 2c639bc3..61708486 100644 --- a/ab_openstreetmap/static/src/js/googlemap_widget.js +++ b/ab_openstreetmap/static/src/js/googlemap_widget.js @@ -10,103 +10,82 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { 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); + this._waitForElement("#mapid", () => { + this._loadGoogleMaps(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(); + _waitForElement: function (selector, callback) { + const el = document.querySelector(selector); + if (el) { + callback(); + } else { + setTimeout(() => this._waitForElement(selector, callback), 100); + } }, - _loadGoogleMaps(apiKey) { + _loadGoogleMaps: function (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.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=marker`; + script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=beta&libraries=marker,maps`; script.async = true; script.defer = true; - script.onload = this._initMap.bind(this); + script.onload = async () => { + await this._initMap(); + }; document.head.appendChild(script); } else { this._initMap(); } }, - _initMap() { + _initMap: async function () { const lat = parseFloat(this.recordData.latitude) || -6.2; const lng = parseFloat(this.recordData.longtitude) || 106.816666; - const isEditable = this.mode === "edit"; + const edit = this.mode === "edit"; - const map = new google.maps.Map(document.getElementById("mapid"), { + const mapEl = document.getElementById("mapid"); + if (!mapEl) return; + + // ✅ Load required Google Maps libraries dynamically + 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: "DEMO_MAP_ID", // optional, ganti kalau punya map ID khusus }); - // 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, - }); + const marker = new AdvancedMarkerElement({ + map, + position: { lat, lng }, + title: "Lokasi", + gmpDraggable: edit, + }); - if (isEditable) { - marker.addListener("dragend", (e) => { - const newLat = e.latLng.lat(); - const newLng = e.latLng.lng(); - this._saveCoords(newLat, newLng); + 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, }); - } - } 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() { + isSet: function () { return true; }, }); diff --git a/ab_openstreetmap/static/src/xml/googlemap_template.xml b/ab_openstreetmap/static/src/xml/googlemap_template.xml index 845be418..3a80a4f2 100644 --- a/ab_openstreetmap/static/src/xml/googlemap_template.xml +++ b/ab_openstreetmap/static/src/xml/googlemap_template.xml @@ -1,8 +1,6 @@ -
-
-
+
-- cgit v1.2.3 From 9df666030d1e3a4bd1293e96122f1df8611f1cd4 Mon Sep 17 00:00:00 2001 From: "Indoteknik ." Date: Fri, 13 Jun 2025 09:27:25 +0700 Subject: (andri) fix edit maps --- ab_openstreetmap/static/src/js/googlemap_widget.js | 47 ++++++++++------------ .../static/src/xml/googlemap_template.xml | 3 +- 2 files changed, 23 insertions(+), 27 deletions(-) (limited to 'ab_openstreetmap/static/src') diff --git a/ab_openstreetmap/static/src/js/googlemap_widget.js b/ab_openstreetmap/static/src/js/googlemap_widget.js index 61708486..f8cafb4b 100644 --- a/ab_openstreetmap/static/src/js/googlemap_widget.js +++ b/ab_openstreetmap/static/src/js/googlemap_widget.js @@ -10,19 +10,20 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { 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._waitForElement("#mapid", () => { + + this._waitForElement("#mapid", async () => { + const apiKey = await rpc.query({ + model: "ir.config_parameter", + method: "get_param", + args: ["google.maps.api_key"], + }); this._loadGoogleMaps(apiKey); }); }, _waitForElement: function (selector, callback) { const el = document.querySelector(selector); - if (el) { + if (el && el.offsetHeight > 0 && el.offsetWidth > 0) { callback(); } else { setTimeout(() => this._waitForElement(selector, callback), 100); @@ -32,20 +33,17 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { _loadGoogleMaps: function (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.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=beta&libraries=marker,maps`; + script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly`; script.async = true; script.defer = true; - script.onload = async () => { - await this._initMap(); - }; + script.onload = () => this._initMap(); document.head.appendChild(script); } else { this._initMap(); } }, - _initMap: async function () { + _initMap: function () { const lat = parseFloat(this.recordData.latitude) || -6.2; const lng = parseFloat(this.recordData.longtitude) || 106.816666; const edit = this.mode === "edit"; @@ -53,31 +51,28 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { const mapEl = document.getElementById("mapid"); if (!mapEl) return; - // ✅ Load required Google Maps libraries dynamically - const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + // Bersihkan inner map jika sudah pernah load sebelumnya + mapEl.innerHTML = ""; - const map = new Map(mapEl, { + const map = new google.maps.Map(mapEl, { center: { lat, lng }, zoom: 15, - mapId: "DEMO_MAP_ID", // optional, ganti kalau punya map ID khusus }); - const marker = new AdvancedMarkerElement({ - map, + const marker = new google.maps.Marker({ position: { lat, lng }, - title: "Lokasi", - gmpDraggable: edit, + map, + draggable: edit, }); if (edit) { - marker.addListener("dragend", () => { - const pos = marker.position; + marker.addListener("dragend", (e) => { + const pos = e.latLng; 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, }); diff --git a/ab_openstreetmap/static/src/xml/googlemap_template.xml b/ab_openstreetmap/static/src/xml/googlemap_template.xml index 3a80a4f2..53aef261 100644 --- a/ab_openstreetmap/static/src/xml/googlemap_template.xml +++ b/ab_openstreetmap/static/src/xml/googlemap_template.xml @@ -1,6 +1,7 @@ -
+ +
-- cgit v1.2.3 From fc6732b6800e49b05b49a94915070d8504e8b461 Mon Sep 17 00:00:00 2001 From: "Indoteknik ." Date: Fri, 13 Jun 2025 11:34:38 +0700 Subject: (andri) migrate marker to advancedMarker pada module gmaps --- ab_openstreetmap/static/src/js/googlemap_widget.js | 39 +++++++++++++--------- 1 file changed, 23 insertions(+), 16 deletions(-) (limited to 'ab_openstreetmap/static/src') 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, }); -- cgit v1.2.3