How to create google search features with location, logitude and latitude

Go to the Google Cloud Console

https://console.cloud.google.com/

     Create or Select a Project

• Click the project dropdown at the top and create a new project or select an existing one.

    Enable Google Maps APIs

Depending on what you want to use (e.g., Maps, Places, Directions, etc.), enable the right APIs:

     Search for and enable:

• Maps JavaScript API

• Geocoding API

• Places API

• Directions API

• (Or any other one you need)

     Get Your API Key

1. Go to “APIs & Services” > “Credentials”

2. Click “Create Credentials” > “API key”

3. A new API key will be generated — copy and save it

    Restrict Your API Key (IMPORTANT!)

     To avoid misuse:

• Click on the key name

• Under “Application restrictions”:

  • Choose HTTP referrers (for web apps) or IP addresses (for server-side)

• Under “API restrictions”, limit to only the APIs you enabled

API KEYS: AIzaSyDK1PE7MhAcbyX0Xe3an2X7lfV5vTn1AVw

Address Autocomplete using Google Places API

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PE7MhAcbyX0Xe3an2X7lfV5vTn1AVw&libraries=places"></script>

<input id="autocomplete" type="text" placeholder="Enter your address" />

<script>
function initAutocomplete() {
const input = document.getElementById("autocomplete");
const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setFields(["address_components", "geometry"]);

autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
console.log(place); // You can extract latitude, longitude, city, etc.
});
}

google.maps.event.addDomListener(window, "load", initAutocomplete);
</script>

Get User’s Current Location (Get latitude and longitude) (Geolocation API)

<button onclick="getLocation()">Get Current Location</button>
<input type="text" id="latitude" placeholder="Latitude">
<input type="text" id="longitude" placeholder="Longitude">

<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
document.getElementById("latitude").value = position.coords.latitude;
document.getElementById("longitude").value = position.coords.longitude;
});
} else {
alert("Geolocation is not supported by this browser.");
}
}
</script>