(andri) add search pada gmaps contact

2 files changed, 50 insertions, 27 deletions

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;
     },
   });
diff --git a/ab_openstreetmap/static/src/xml/googlemap_template.xml b/ab_openstreetmap/static/src/xml/googlemap_template.xml
index 53aef261..e4639a51 100644
--- a/ab_openstreetmap/static/src/xml/googlemap_template.xml
+++ b/ab_openstreetmap/static/src/xml/googlemap_template.xml
@@ -1,7 +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> -->
-    <div t-attf-id="mapid" style="height: 400px; width: 100%;" ></div>
+    <div id="mapid" style="height: 400px; width: 100%;"></div>
   </t>
 </templates>
+