In the search page, users can search for places. When they click on the address, a new webpage will display the address details. However the new webpage displays only: "Place details not found in Nominatim database". What should I fix in my code ?
search page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search</title>
</head>
<body>
<h1>Search</h1>
<input type="text" id="searchInput" placeholder="Search for a place">
<button id="searchButton">Search</button>
<div id="placeDetails"></div>
<script src="scripttest.js"></script>
</body>
</html>
javascritp for search page
document.addEventListener("DOMContentLoaded", function () {
const searchButton = document.getElementById("searchButton");
searchButton.addEventListener("click", searchPlace);
});
function searchPlace() {
const searchInput = document.getElementById("searchInput");
const placeName = searchInput.value;
getPlaceDetails(placeName);
}
function getPlaceDetails(placeName) {
// Make a request to Nominatim's API to fetch place details
fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${placeName}`)
.then(response => response.json())
.then(data => {
if (data.length > 0) {
displayPlaceResults(data);
} else {
displayErrorMessage("Place not found.");
}
})
.catch(error => {
console.error("Error fetching place details:", error);
displayErrorMessage("An error occurred while fetching place details.");
});
}
function displayPlaceResults(results) {
const placeDetails = document.getElementById("placeDetails");
placeDetails.innerHTML = "";
if (results.length === 1) {
displayPlaceDetails(results[0]);
} else if (results.length > 1) {
const resultList = document.createElement("ul");
results.forEach(place => {
const item = document.createElement("li");
const link = document.createElement("a");
link.href = `details.html?place_id=${place.place_id}`;
link.textContent = place.display_name;
item.appendChild(link);
resultList.appendChild(item);
});
placeDetails.appendChild(resultList);
} else {
placeDetails.innerHTML = `<p>No results found.</p>`;
}
}
function displayPlaceDetails(placeId) {
// Make a request to Nominatim's API to fetch place details by place_id
fetch(`https://nominatim.openstreetmap.org/details?format=json&place_id=${placeId}`)
.then(response => response.json())
.then(data => {
displaySelectedPlaceDetails(data);
})
.catch(error => {
console.error("Error fetching place details:", error);
displayErrorMessage("An error occurred while fetching place details.");
});
}
function displaySelectedPlaceDetails(place) {
const placeDetails = document.getElementById("placeDetails");
placeDetails.innerHTML = `
<h2>${place.display_name}</h2>
<p>Street: ${place.address.road || 'N/A'}</p>
<p>Building Number: ${place.address.house_number || 'N/A'}</p>
`;
}
function displayErrorMessage(message) {
const placeDetails = document.getElementById("placeDetails");
placeDetails.innerHTML = `<p>${message}</p>`;
}
new page with place details
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details</title>
</head>
<body>
<h1>Place Details</h1>
<div id="placeDetails"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const placeId = getPlaceIdFromUrl();
if (placeId) {
getPlaceDetails(placeId);
}
});
function getPlaceIdFromUrl() {
const urlParams = new URLSearchParams(window.location.search);
const placeId = urlParams.get("place_id");
console.log("Extracted place_id: ", placeId);
return placeId;
}
function getPlaceDetails(placeId) {
fetch(`https://nominatim.openstreetmap.org/details?format=json&place_id=${placeId}`)
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error(`Error fetching place details: HTTP status ${response.status}`);
}
})
.then(data => {
if (data.address) {
displaySelectedPlaceDetails(data);
} else {
displayErrorMessage("Place details not found in Nominatim database.");
}
})
.catch(error => {
console.error("Error fetching place details:", error);
displayErrorMessage("An error occurred while fetching place details.");
});
}
function displaySelectedPlaceDetails(place) {
const placeDetails = document.getElementById("placeDetails");
const address = place.addresstags || {};
const street = address.road || 'N/A';
const buildingNumber = address.house_number || 'N/A';
placeDetails.innerHTML = `
<h2>${place.names.name}</h2>
<p>Street: ${street}</p>
<p>Building Number: ${buildingNumber}</p>
`;
}
function displayErrorMessage(message) {
const placeDetails = document.getElementById("placeDetails");
placeDetails.innerHTML = `<p>${message}</p>`;
}
</script>
</body>
</html>
I have checked if the "place_id" retrieved from API is correct and it seems to be ok. However the address details doesn't come up in my web page