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 From 1cecf60302ea02e250a97ca2dbc6679332988bc0 Mon Sep 17 00:00:00 2001 From: "Indoteknik ." Date: Sat, 14 Jun 2025 10:26:28 +0700 Subject: (andri) add search pada gmaps contact --- ab_openstreetmap/static/src/js/googlemap_widget.js | 73 ++++++++++++++-------- 1 file changed, 48 insertions(+), 25 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 4c48d564..ebbffa1d 100644 --- a/ab_openstreetmap/static/src/js/googlemap_widget.js +++ b/ab_openstreetmap/static/src/js/googlemap_widget.js @@ -10,35 +10,33 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { 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); - }); + this._waitForMapReady(); }, - _waitForElement: function (selector, callback) { - const el = document.querySelector(selector); - if (el && el.offsetHeight > 0 && el.offsetWidth > 0) { - callback(); + _waitForMapReady: function () { + const mapEl = document.getElementById("mapid"); + if (mapEl && mapEl.offsetWidth > 0 && mapEl.offsetHeight > 0) { + this._loadGoogle(); } else { - setTimeout(() => this._waitForElement(selector, callback), 100); + setTimeout(() => this._waitForMapReady(), 100); } }, - _loadGoogleMaps: function (apiKey, mapId) { + async _loadGoogle() { + 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"], + }); + 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.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly&libraries=places,marker`; script.async = true; script.defer = true; script.onload = () => this._initMap(mapId); @@ -48,11 +46,10 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { } }, - _initMap: async function (mapId) { + async _initMap(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; @@ -62,7 +59,7 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { const map = new Map(mapEl, { center: { lat, lng }, zoom: 15, - mapId: mapId, + mapId: mapId || undefined, }); const marker = new AdvancedMarkerElement({ @@ -84,10 +81,36 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { viewType: this.viewType, }); }); + + // Search Box (autocomplete) + const input = document.createElement("input"); + input.type = "text"; + input.placeholder = "Cari alamat..."; + input.style = "width: 100%; padding: 8px; margin-bottom: 10px;"; + mapEl.parentNode.insertBefore(input, mapEl); + + const autocomplete = new google.maps.places.Autocomplete(input); + autocomplete.addListener("place_changed", () => { + const place = autocomplete.getPlace(); + if (place.geometry) { + const loc = place.geometry.location; + map.setCenter(loc); + marker.position = loc; + + this.trigger_up("field_changed", { + dataPointID: this.dataPointID, + changes: { + latitude: loc.lat().toString(), + longtitude: loc.lng().toString(), + }, + viewType: this.viewType, + }); + } + }); } }, - isSet: function () { + isSet() { return true; }, }); -- cgit v1.2.3 From 60801084c9c93b3ec2d584a8a1de4af019b5fa80 Mon Sep 17 00:00:00 2001 From: "Indoteknik ." Date: Sat, 14 Jun 2025 11:49:33 +0700 Subject: (andri) fix peletakan search autocomplete & tambahan info mengenai address map --- ab_openstreetmap/static/src/js/googlemap_widget.js | 62 +++++++++++++--------- 1 file changed, 37 insertions(+), 25 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 ebbffa1d..e13fac61 100644 --- a/ab_openstreetmap/static/src/js/googlemap_widget.js +++ b/ab_openstreetmap/static/src/js/googlemap_widget.js @@ -53,6 +53,8 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { const mapEl = document.getElementById("mapid"); if (!mapEl) return; + mapEl.style.position = "relative"; + const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); @@ -72,44 +74,54 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { 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, - }); + this._updateCoordinates(pos.lat, pos.lng); }); - // Search Box (autocomplete) + // Tambahkan input search const input = document.createElement("input"); input.type = "text"; input.placeholder = "Cari alamat..."; - input.style = "width: 100%; padding: 8px; margin-bottom: 10px;"; - mapEl.parentNode.insertBefore(input, mapEl); - + input.id = "search-input"; + input.style.cssText = ` + position: absolute; + top: 10px; + left: 50%; + transform: translateX(-50%); + z-index: 5; + width: 300px; + padding: 6px; + font-size: 14px; + border-radius: 4px; + border: 1px solid #ccc; + background: white; + `; + mapEl.appendChild(input); + + // Gunakan Autocomplete klasik (deprecated tapi stabil) const autocomplete = new google.maps.places.Autocomplete(input); autocomplete.addListener("place_changed", () => { const place = autocomplete.getPlace(); - if (place.geometry) { - const loc = place.geometry.location; - map.setCenter(loc); - marker.position = loc; - - this.trigger_up("field_changed", { - dataPointID: this.dataPointID, - changes: { - latitude: loc.lat().toString(), - longtitude: loc.lng().toString(), - }, - viewType: this.viewType, - }); + if (place && place.geometry && place.geometry.location) { + const pos = place.geometry.location; + map.setCenter(pos); + marker.position = pos; + this._updateCoordinates(pos.lat(), pos.lng()); } }); } }, + _updateCoordinates(lat, lng) { + this.trigger_up("field_changed", { + dataPointID: this.dataPointID, + changes: { + latitude: lat.toString(), + longtitude: lng.toString(), + }, + viewType: this.viewType, + }); + }, + isSet() { return true; }, -- cgit v1.2.3 From 3c8ff8cb6a24dd1ddec7d34313722d7dee6f23a3 Mon Sep 17 00:00:00 2001 From: "Indoteknik ." Date: Mon, 16 Jun 2025 16:15:57 +0700 Subject: (andri) taruh key hardcode --- ab_openstreetmap/static/src/js/googlemap_widget.js | 25 ++++++++++++---------- 1 file changed, 14 insertions(+), 11 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 e13fac61..cdbd376c 100644 --- a/ab_openstreetmap/static/src/js/googlemap_widget.js +++ b/ab_openstreetmap/static/src/js/googlemap_widget.js @@ -23,17 +23,20 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { }, async _loadGoogle() { - 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"], - }); - + // 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"], + // }); + + const apiKey = "AIzaSyD1b2e4g3f8a9c5d6e7f8g9h0i1j2k3l4m"; // Ganti dengan API Key Anda + const mapId = "1af072c8d80a2adec8057f34"; + // Ganti dengan Map ID Anda 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=places,marker`; -- cgit v1.2.3 From a8460239603b7a73a185fec394b0f95ab0247207 Mon Sep 17 00:00:00 2001 From: "Indoteknik ." Date: Mon, 16 Jun 2025 16:23:51 +0700 Subject: (andri) fix key --- ab_openstreetmap/static/src/js/googlemap_widget.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 cdbd376c..1728fa54 100644 --- a/ab_openstreetmap/static/src/js/googlemap_widget.js +++ b/ab_openstreetmap/static/src/js/googlemap_widget.js @@ -34,7 +34,7 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { // args: ["google.maps.map_id"], // }); - const apiKey = "AIzaSyD1b2e4g3f8a9c5d6e7f8g9h0i1j2k3l4m"; // Ganti dengan API Key Anda + const apiKey = "AIzaSyB7bG9aSNAJnSrj0Z7f1abFsqKVoiJfsPE"; // Ganti dengan API Key Anda const mapId = "1af072c8d80a2adec8057f34"; // Ganti dengan Map ID Anda if (!window.google || !window.google.maps) { -- cgit v1.2.3 From a80565682063e718fc55c90e4243b9d5b2432285 Mon Sep 17 00:00:00 2001 From: "Indoteknik ." Date: Tue, 17 Jun 2025 08:47:53 +0700 Subject: (andri) fix load gmaps pada view & edit --- ab_openstreetmap/static/src/js/googlemap_widget.js | 31 +++++++++++----------- 1 file changed, 15 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 1728fa54..6471be0b 100644 --- a/ab_openstreetmap/static/src/js/googlemap_widget.js +++ b/ab_openstreetmap/static/src/js/googlemap_widget.js @@ -13,30 +13,23 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { this._waitForMapReady(); }, + on_attach_callback: function () { + this._waitForMapReady(); // Trigger ulang saat widget dimunculkan + }, + _waitForMapReady: function () { const mapEl = document.getElementById("mapid"); if (mapEl && mapEl.offsetWidth > 0 && mapEl.offsetHeight > 0) { this._loadGoogle(); } else { - setTimeout(() => this._waitForMapReady(), 100); + setTimeout(() => this._waitForMapReady(), 300); // Tambah jeda untuk mode edit/tab } }, async _loadGoogle() { - // 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"], - // }); - - const apiKey = "AIzaSyB7bG9aSNAJnSrj0Z7f1abFsqKVoiJfsPE"; // Ganti dengan API Key Anda - const mapId = "1af072c8d80a2adec8057f34"; - // Ganti dengan Map ID Anda + const apiKey = "AIzaSyB7bG9aSNAJnSrj0Z7f1abFsqKVoiJfsPE"; // Ganti sesuai kebutuhan + const mapId = "1af072c8d80a2adec8057f34"; // Ganti sesuai kebutuhan + 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=places,marker`; @@ -57,6 +50,7 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { if (!mapEl) return; mapEl.style.position = "relative"; + mapEl.style.minHeight = "400px"; // Pastikan map tidak collapse const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); @@ -67,6 +61,12 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { mapId: mapId || undefined, }); + // Trigger resize untuk menangani kasus map awalnya hidden + setTimeout(() => { + google.maps.event.trigger(map, "resize"); + map.setCenter({ lat, lng }); // Reset ulang posisi setelah resize + }, 300); + const marker = new AdvancedMarkerElement({ map, position: { lat, lng }, @@ -100,7 +100,6 @@ odoo.define("ab_openstreetmap.googlemap_widget", function (require) { `; mapEl.appendChild(input); - // Gunakan Autocomplete klasik (deprecated tapi stabil) const autocomplete = new google.maps.places.Autocomplete(input); autocomplete.addListener("place_changed", () => { const place = autocomplete.getPlace(); -- cgit v1.2.3