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/__manifest__.py | 2 +- 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 -- ab_openstreetmap/views/templates.xml | 24 ++--- indoteknik_api/controllers/api_v1/partner.py | 2 +- indoteknik_custom/models/res_partner.py | 77 ++++++++++++++ indoteknik_custom/views/res_partner.xml | 5 +- 9 files changed, 217 insertions(+), 130 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 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..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 diff --git a/ab_openstreetmap/views/templates.xml b/ab_openstreetmap/views/templates.xml index ed82ae84..57357bda 100644 --- a/ab_openstreetmap/views/templates.xml +++ b/ab_openstreetmap/views/templates.xml @@ -1,13 +1,13 @@ - -