zet-lib 2.0.1 → 2.0.2

package/lib/moduleLib.js

@@ -147,92 +147,185 @@ m.location = function (req, res, key) {
   let script = ``;
   let head = ``;
   let end = ``;
-  end += `<script src="https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_KEY}&callback=initAutocompleteZmap&libraries=places&language=ID" defer></script>`;
-  script += `let searchAddressMap;
-    let autocompleteMap;
-    function initAutocompleteZmap() {
-        if(mapLocationJSON && mapLocationJSON.lat) {
-            $("#search_map_location").val(mapLocationJSON.address1);
-            initMap(mapLocationJSON.lat,mapLocationJSON.lon);
-        } else {
-          navigator.geolocation.getCurrentPosition(function(location) {
-            initMap(location.coords.latitude,location.coords.longitude);
-            $("#search_map_location").val("My Place");
-          });
+  end =+ `<script src="https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_KEY}&callback=initAutocompleteZmap&libraries=places,marker&language=ID&loading=async" defer></script>`
+  script += `let searchAddressMap, autocompleteMap, marker, map;
+
+function initAutocompleteZmap() {
+    if (mapLocationJSON && mapLocationJSON.lat) {
+        $("#search_map_location").val(mapLocationJSON.address1);
+        initMap(mapLocationJSON.lat, mapLocationJSON.lon);
+    } else {
+        navigator.geolocation.getCurrentPosition(function(position) {
+            initMap(position.coords.latitude, position.coords.longitude);
+            $("#search_map_location").val("");
+        });
+    }
+    
+    searchAddressMap = document.querySelector("#search_map_location");
+    
+    // Use PlaceAutocompleteElement (new API) instead of deprecated Autocomplete
+    // Check if PlaceAutocompleteElement is available
+    if (google.maps.places && google.maps.places.PlaceAutocompleteElement) {
+        try {
+            // Create PlaceAutocompleteElement programmatically
+            autocompleteMap = new google.maps.places.PlaceAutocompleteElement({
+                inputField: searchAddressMap,
+                componentRestrictions: {country: ["ID"]},
+                requestedResultFields: ["formattedAddress", "geometry", "addressComponents"]
+            });
+            
+            // Listen for place selection event
+            autocompleteMap.addEventListener("gmp-placeselect", function(event) {
+                if (event.place) {
+                    fillInAddressNew(event.place);
+                }
+            });
+            
+            searchAddressMap.focus();
+        } catch (e) {
+            console.warn("Error initializing PlaceAutocompleteElement, falling back to Autocomplete:", e);
+            // Fallback to old Autocomplete API
+            autocompleteMap = new google.maps.places.Autocomplete(searchAddressMap, {
+                componentRestrictions: {country: ["ID"]},
+                fields: ["address_component", "geometry"]
+            });
+            searchAddressMap.focus();
+            autocompleteMap.addListener("place_changed", fillInAddress);
         }
-        searchAddressMap = document.querySelector("#search_map_location");
+    } else {
+        // Fallback to old Autocomplete API if PlaceAutocompleteElement is not available
+        console.warn("PlaceAutocompleteElement not available, using legacy Autocomplete");
         autocompleteMap = new google.maps.places.Autocomplete(searchAddressMap, {
             componentRestrictions: {country: ["ID"]},
-            fields: ["address_component", "geometry"],
+            fields: ["address_component", "geometry"]
         });
         searchAddressMap.focus();
         autocompleteMap.addListener("place_changed", fillInAddress);
     }
+}
+
+function fillInAddress() {
+    var place = autocompleteMap.getPlace();
+    var lat = place.geometry.location.lat();
+    var lng = place.geometry.location.lng();
+    initMap(lat, lng);
+    mapLocationJSON = {
+        lat: lat,
+        lon: lng,
+        address1: $("#search_map_location").val(),
+        address2: place.address_components
+    };
+    setAddress();
+}
+
+function fillInAddressNew(place) {
+    // Handle PlaceAutocompleteElement place selection
+    var location = place.geometry.location;
+    var lat = typeof location.lat === 'function' ? location.lat() : location.lat;
+    var lng = typeof location.lng === 'function' ? location.lng() : location.lng;
     
-    function fillInAddress() {
-        const place = autocompleteMap.getPlace();
-        let lat = place.geometry.location.lat();
-        let lon = place.geometry.location.lng();
-        initMap(lat, lon);
-        mapLocationJSON = {
-            lat:lat,
-            lon:lon,
-            address1: $("#search_map_location").val(),
-            address2:place.address_components,
-        }
-        setAddress();
-    }
-    function setAddress() {
-        $("#${key}").val(JSON.stringify(mapLocationJSON));
-    }
-    function initMap(lat, lon) {
-        let position = {lat: lat, lng: lon}
-        const map = new google.maps.Map(document.getElementById("map_${key}"), {
-            zoom: 13,
-            center: position,
-            draggable: true
+    initMap(lat, lng);
+    mapLocationJSON = {
+        lat: lat,
+        lon: lng,
+        address1: place.formattedAddress || $("#search_map_location").val(),
+        address2: place.addressComponents || []
+    };
+    setAddress();
+}
+
+function setAddress() {
+    $("#${key}").val(JSON.stringify(mapLocationJSON));
+}
+
+function initMap(lat, lng) {
+    var position = {lat: lat, lng: lng};
+    
+    // Create map with mapId for AdvancedMarkerElement support
+    // If you have a custom map ID from Google Cloud Console, replace "DEMO_MAP_ID" with it
+    map = new google.maps.Map(document.getElementById("map_${key}"), {
+        zoom: 13,
+        center: position,
+        draggable: true,
+        mapId: "DEMO_MAP_ID" // Required for AdvancedMarkerElement - replace with your actual Map ID
+    });
+    
+    // Use AdvancedMarkerElement instead of deprecated Marker
+    // Note: AdvancedMarkerElement requires mapId on the map
+    try {
+        marker = new google.maps.marker.AdvancedMarkerElement({
+            position: position,
+            map: map,
+            gmpDraggable: true,
+            title: $("#search_map_location").val() || "Location"
         });
-        var marker;
-        placeMarker(position, map);
-        var infowindow = new google.maps.InfoWindow();
-        function placeMarker(position, map) {
-            marker = new google.maps.Marker({
-                position: position,
-                map: map,
-                draggable: true,
-                animation: google.maps.Animation.DROP,
+        
+        // Handle marker drag end
+        marker.addListener("dragend", function(event) {
+            var newPosition = event.latLng || marker.position;
+            mapLocationJSON.lat = typeof newPosition.lat === 'function' ? newPosition.lat() : newPosition.lat;
+            mapLocationJSON.lon = typeof newPosition.lng === 'function' ? newPosition.lng() : newPosition.lng;
+            
+            var geocoder = new google.maps.Geocoder();
+            geocoder.geocode({location: newPosition}, function(results, status) {
+                if (status == google.maps.GeocoderStatus.OK) {
+                    $("#search_map_location").val(results[0].formatted_address);
+                    $("#mapErrorMsg").hide(100);
+                    mapLocationJSON.address2 = results[0].formatted_address;
+                    mapLocationJSON.address1 = $("#search_map_location").val();
+                    setAddress();
+                } else {
+                    $("#mapErrorMsg").html("Cannot determine address at this location." + status).show(100);
+                }
             });
-            map.panTo(position);
-        }
-        google.maps.event.addListener(marker, 'dragend', function () {
-            geocodePosition(marker.getPosition());
         });
-        google.maps.event.addListener(marker, 'click', function() {
-            infowindow.setContent($("#search_map_location").val());
-            infowindow.open(map, this)
+        
+        // Handle marker click
+        marker.addListener("click", function() {
+            var infoWindow = new google.maps.InfoWindow({
+                content: $("#search_map_location").val()
+            });
+            infoWindow.open(map, marker);
+        });
+    } catch (e) {
+        // Fallback to old Marker API if AdvancedMarkerElement is not available
+        console.warn("AdvancedMarkerElement not available, using legacy Marker:", e);
+        marker = new google.maps.Marker({
+            position: position,
+            map: map,
+            draggable: true,
+            animation: google.maps.Animation.DROP
         });
-        function geocodePosition(pos) {
-            mapLocationJSON.lat=pos.lat();
-            mapLocationJSON.lon=pos.lng();
+        
+        google.maps.event.addListener(marker, "dragend", function() {
+            var newPosition = marker.getPosition();
+            mapLocationJSON.lat = newPosition.lat();
+            mapLocationJSON.lon = newPosition.lng();
+            
             var geocoder = new google.maps.Geocoder();
-            geocoder.geocode
-            ({
-                    latLng: pos
-                },
-                function (results, status) {
-                    if (status == google.maps.GeocoderStatus.OK) {
-                        $("#search_map_location").val(results[0].formatted_address);
-                        $("#mapErrorMsg").hide(100);
-                        mapLocationJSON.address2=results[0].formatted_address;
-                        mapLocationJSON.address1=$("#search_map_location").val();
-                        setAddress();
-                    } else {
-                        $("#mapErrorMsg").html('Cannot determine address at this location.' + status).show(100);
-                    }
+            geocoder.geocode({latLng: newPosition}, function(results, status) {
+                if (status == google.maps.GeocoderStatus.OK) {
+                    $("#search_map_location").val(results[0].formatted_address);
+                    $("#mapErrorMsg").hide(100);
+                    mapLocationJSON.address2 = results[0].formatted_address;
+                    mapLocationJSON.address1 = $("#search_map_location").val();
+                    setAddress();
+                } else {
+                    $("#mapErrorMsg").html("Cannot determine address at this location." + status).show(100);
                 }
-            );
-        }
-    }`;
+            });
+        });
+        
+        google.maps.event.addListener(marker, "click", function() {
+            var infoWindow = new google.maps.InfoWindow({
+                content: $("#search_map_location").val()
+            });
+            infoWindow.open(map, marker);
+        });
+    }
+    
+    map.panTo(position);
+}`;
   return {
     head: head,
     end: end,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zet-lib",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "zet is a library that part of zet generator.",
   "engines": {
     "node": ">=18"