summaryrefslogtreecommitdiff
path: root/ab_openstreetmap/static/src/js/googlemap_widget.js
diff options
context:
space:
mode:
authorit-fixcomart <it@fixcomart.co.id>2025-07-28 15:09:55 +0700
committerit-fixcomart <it@fixcomart.co.id>2025-07-28 15:09:55 +0700
commitd15ce4e186e2b77f01e8dfd03886298cc733d4c1 (patch)
tree1b32a4c29c4fcea85070fcecb5b77a7d55d30029 /ab_openstreetmap/static/src/js/googlemap_widget.js
parentdeba962d7368a5c4e30441b5a640102608e3dde6 (diff)
parent36a53535dbdc5777266fd9276b4c557259dab6be (diff)
<hafid> merging odoo-backup
Diffstat (limited to 'ab_openstreetmap/static/src/js/googlemap_widget.js')
-rw-r--r--ab_openstreetmap/static/src/js/googlemap_widget.js133
1 files changed, 133 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..6471be0b
--- /dev/null
+++ b/ab_openstreetmap/static/src/js/googlemap_widget.js
@@ -0,0 +1,133 @@
+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._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(), 300); // Tambah jeda untuk mode edit/tab
+ }
+ },
+
+ async _loadGoogle() {
+ 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`;
+ script.async = true;
+ script.defer = true;
+ script.onload = () => this._initMap(mapId);
+ document.head.appendChild(script);
+ } else {
+ this._initMap(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;
+
+ 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");
+
+ const map = new Map(mapEl, {
+ center: { lat, lng },
+ zoom: 15,
+ 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 },
+ gmpDraggable: edit,
+ title: "Lokasi",
+ });
+
+ if (edit) {
+ marker.addListener("dragend", () => {
+ const pos = marker.position;
+ this._updateCoordinates(pos.lat, pos.lng);
+ });
+
+ // Tambahkan input search
+ const input = document.createElement("input");
+ input.type = "text";
+ input.placeholder = "Cari alamat...";
+ 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);
+
+ const autocomplete = new google.maps.places.Autocomplete(input);
+ autocomplete.addListener("place_changed", () => {
+ const place = autocomplete.getPlace();
+ 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;
+ },
+ });
+
+ fieldRegistry.add("googlemap", GoogleMapWidget);
+});