diff options
| author | Miqdad <ahmadmiqdad27@gmail.com> | 2025-06-17 08:11:32 +0700 |
|---|---|---|
| committer | Miqdad <ahmadmiqdad27@gmail.com> | 2025-06-17 08:11:32 +0700 |
| commit | a2a003a86379fab81b2df36cff5022e1d22a589d (patch) | |
| tree | 72cb451d0793837d785b74beb79cfe5df000bfc4 /ab_openstreetmap/static/src | |
| parent | abd7da741c6eec02dbefa195b91dbedd70b3323e (diff) | |
| parent | a8460239603b7a73a185fec394b0f95ab0247207 (diff) | |
<miqdad> merge odoo-backup
Diffstat (limited to 'ab_openstreetmap/static/src')
| -rw-r--r-- | ab_openstreetmap/static/src/js/googlemap_widget.js | 134 | ||||
| -rw-r--r-- | ab_openstreetmap/static/src/xml/googlemap_template.xml | 7 |
2 files changed, 141 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..1728fa54 --- /dev/null +++ b/ab_openstreetmap/static/src/js/googlemap_widget.js @@ -0,0 +1,134 @@ +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(); + }, + + _waitForMapReady: function () { + const mapEl = document.getElementById("mapid"); + if (mapEl && mapEl.offsetWidth > 0 && mapEl.offsetHeight > 0) { + this._loadGoogle(); + } else { + setTimeout(() => this._waitForMapReady(), 100); + } + }, + + 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 + 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"; + + 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, + }); + + 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); + + // Gunakan Autocomplete klasik (deprecated tapi stabil) + 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); +}); 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..e4639a51 --- /dev/null +++ b/ab_openstreetmap/static/src/xml/googlemap_template.xml @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates id="template" xml:space="preserve"> + <t t-name="googlemap_template"> + <div id="mapid" style="height: 400px; width: 100%;"></div> + </t> +</templates> + |
