Changes in map script in register complaints form

src/main/java/com/gcc/publicgrievance/configuration/DataSourceConfig.java

@@ -21,7 +21,7 @@ import javax.sql.DataSource;
 @EnableTransactionManagement
 public class DataSourceConfig {
 	
-//		//private static String dbpassword  = "gccroot";
+		//private static String dbpassword  = "gccroot";
 //	    private static String host = "localhost";
 //		private static String dbpassword  = "root";
 		

src/main/resources/application.properties

@@ -1 +1 @@
-spring.profiles.active= prod
+spring.profiles.active=prod

src/main/resources/templates/User/registercomplaints.html

@@ -179,7 +179,7 @@
 			max-width: 100%;
 		}
 		
-		#pac-input {
+/* 		#pac-input {
 		    position: absolute;
 		    top: 10px;
 		    left: 50%;
@@ -203,9 +203,22 @@
 			background-color: white;
 			border-radius: 4px;
 			padding: 0;
-			/* Removed extra padding to match the input width */
+		} */
+		
+		#pac-input {
+
+		width: 100%;
+		padding: 10px;
+
+		border: 1px solid #ccc;
+		border-radius: 4px;
+
+		font-size: 15px;
+
+		box-sizing: border-box;
 	}
 		
+
 		#search-box {
 			width: 100%;
 			/* Ensures the input takes up the entire width of the container */
@@ -218,7 +231,7 @@
 			/* Makes sure padding is considered in width */
 		}
 
-		#suggestions {
+		/* #suggestions {
 			border: 1px solid #ccc;
 			border-radius: 4px;
 			max-height: 200px;
@@ -227,9 +240,7 @@
 			background-color: white;
 			display: none;
 			width: 100%;
-			/* Matches the width of the container and input */
 			box-sizing: border-box;
-			/* Ensures the width includes borders and padding */
 		}
 
 		#suggestions ul {
@@ -245,8 +256,61 @@
 
 		#suggestions ul li:hover {
 			background-color: #f0f0f0;
+		} */
+		
+		#suggestions {
+
+		width: 100%;
+
+		display: none;
+
+		background: #fff;
+
+		border: 1px solid #ccc;
+
+		border-top: none;
+
+		max-height: 220px;
+
+		overflow-y: auto;
+
+		box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
+	}
+
+	#suggestions ul {
+
+		margin: 0;
+		padding: 0;
+		list-style: none;
 	}
 
+	#suggestions li {
+
+		padding: 10px 12px;
+
+		cursor: pointer;
+
+		border-bottom: 1px solid #eee;
+	}
+
+	#suggestions li:hover {
+
+		background: #f5f5f5;
+	}
+	
+	#search-container {
+
+		position: absolute;
+		top: 10px;
+		left: 50%;
+		transform: translateX(-50%);
+
+		width: 420px;
+
+		z-index: 1000;
+	}
+		
+
 		/*header css*/
 		.header {
 			background-color: #3b4858;
@@ -581,13 +645,15 @@
 						<div class="col-md-12">
 							<!-- <div id="map"></div> -->
 							<div id="mapContainer" style="position: relative; height: 500px;">
-							  <input id="pac-input" class="controls" type="text" placeholder="Search location">
-							  <div id="googleMap" style="height: 100%; width: 100%;"></div>
-							</div>
 							<div id="search-container">
+								<input id="pac-input" class="controls" type="text" placeholder="Search location - please enter minimum of 5 characters">
 								<!-- <input type="text" id="search-box" placeholder="Search for a location..."> -->
 								<div id="suggestions"></div>
 							</div>
+							  
+							  <div id="googleMap" style="height: 100%; width: 100%;"></div>
+							</div>
+							
 							<div class="row">
 								<div class="col-md-6">
 									<!-- <label for="street">Street:</label>
@@ -1265,7 +1331,7 @@ function myMap() {
 	const infowindow = new google.maps.InfoWindow();
 
 	// 🔍 Initialize the SearchBox
-	const input = document.getElementById('pac-input');
+/* 	const input = document.getElementById('pac-input');
 	const searchBox = new google.maps.places.SearchBox(input);
 	//map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
 
@@ -1298,6 +1364,145 @@ function myMap() {
 		infowindow.open(map, marker);
 
 		fetchStreets(lat, lng);
+	}); */
+	
+	const input = document.getElementById("pac-input");
+	const suggestions = document.getElementById("suggestions");
+
+	const autocompleteService = new google.maps.places.AutocompleteService();
+	const placesService = new google.maps.places.PlacesService(map);
+
+	let debounceTimer = null;
+
+	input.addEventListener("input", function () {
+
+		clearTimeout(debounceTimer);
+
+		const query = this.value.trim();
+
+		// Hide suggestions
+		if (query.length < 5) {
+
+			suggestions.style.display = "none";
+			suggestions.innerHTML = "";
+
+			return;
+		}
+
+		debounceTimer = setTimeout(function () {
+
+			autocompleteService.getPlacePredictions({
+
+				input: query,
+				bounds: map.getBounds()
+
+			}, showPredictions);
+
+		}, 500);
+
+	});
+
+	function showPredictions(predictions, status) {
+
+		suggestions.innerHTML = "";
+
+		if (
+			status !== google.maps.places.PlacesServiceStatus.OK ||
+			!predictions ||
+			predictions.length === 0
+		) {
+
+			suggestions.style.display = "none";
+			return;
+		}
+
+		const ul = document.createElement("ul");
+
+		predictions.forEach(function (prediction) {
+
+			const li = document.createElement("li");
+
+			li.innerHTML = prediction.description;
+
+			li.onclick = function () {
+
+				input.value = prediction.description;
+
+				suggestions.style.display = "none";
+
+				loadPlace(prediction.place_id);
+
+			};
+
+			ul.appendChild(li);
+
+		});
+
+		suggestions.appendChild(ul);
+
+		suggestions.style.display = "block";
+
+	}
+
+	function loadPlace(placeId) {
+
+		placesService.getDetails({
+
+			placeId: placeId,
+			fields: [
+				"geometry",
+				"formatted_address",
+				"name"
+			]
+
+		}, function (place, status) {
+
+			if (status !== google.maps.places.PlacesServiceStatus.OK)
+				return;
+
+			if (marker)
+				marker.setMap(null);
+
+			marker = new google.maps.Marker({
+
+				map: map,
+				position: place.geometry.location
+
+			});
+
+			const lat = place.geometry.location.lat().toFixed(6);
+			const lng = place.geometry.location.lng().toFixed(6);
+
+			document.getElementById("latitude_field").value = lat;
+			document.getElementById("longitude_field").value = lng;
+
+			map.setCenter(place.geometry.location);
+			map.setZoom(15);
+
+			infowindow.setContent(
+				"Latitude : " + lat +
+				"<br>Longitude : " + lng
+			);
+
+			infowindow.open(map, marker);
+
+			fetchStreets(lat, lng);
+
+		});
+
+	}
+
+	document.addEventListener("click", function (e) {
+
+		if (
+			!suggestions.contains(e.target) &&
+			e.target !== input
+		) {
+
+			suggestions.style.display = "none";
+
+		}
+
 	});
 
 	map.addListener("click", function (event) {
@@ -2425,6 +2630,7 @@ function myMap() {
 
 
 		
+
 	</script>
 
 </body>