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 +++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 ab_openstreetmap/static/src/js/googlemap_widget.js (limited to 'ab_openstreetmap/static/src/js/googlemap_widget.js') 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); +}); -- 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 +++++++++------------ 1 file changed, 44 insertions(+), 65 deletions(-) (limited to 'ab_openstreetmap/static/src/js/googlemap_widget.js') 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; }, }); -- 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 ++++++++++------------ 1 file changed, 21 insertions(+), 26 deletions(-) (limited to 'ab_openstreetmap/static/src/js/googlemap_widget.js') 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, }); -- 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/js/googlemap_widget.js') 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