To set the location coordinates (latitude and longitude) of a city when a button with the city name is pressed in a Next.js web application using the Google Places API, you can follow these steps:

  1. Set Up the Google Places API: First, you need to set up the Google Places API and obtain an API key. Go to the Google Cloud Console, create a new project, enable the Places API, and generate an API key.

  2. Install Required Packages: In your Next.js project, install the required packages to make API requests to the Google Places API.

bash
npm install axios
  1. Create the API Request: Create a utility function or a service to make the API request to the Google Places API and fetch the location coordinates for the given city name.
javascript
// utils/placesApi.js import axios from 'axios'; const API_KEY = 'YOUR_GOOGLE_PLACES_API_KEY'; export async function getCityCoordinates(cityName) { const response = await axios.get('https://maps.googleapis.com/maps/api/place/findplacefromtext/json', { params: { input: cityName, inputtype: 'textquery', key: API_KEY, }, }); if (response.data && response.data.candidates && response.data.candidates.length > 0) { const result = response.data.candidates[0]; const { lat, lng } = result.geometry.location; return { latitude: lat, longitude: lng }; } throw new Error('City not found or location coordinates not available.'); }
  1. Create a Next.js Page with the Button: Create a Next.js page that displays the city name as buttons and allows users to select a city.
jsx
// pages/index.js import { useState } from 'react'; import { getCityCoordinates } from '../utils/placesApi'; const cities = ['New York', 'London', 'Paris']; // Add other city names as needed export default function Home() { const [selectedCity, setSelectedCity] = useState(''); const handleCityButtonClick = async (cityName) => { try { const { latitude, longitude } = await getCityCoordinates(cityName); setSelectedCity(cityName); // Do something with the location coordinates (latitude and longitude) console.log(`Latitude: ${latitude}, Longitude: ${longitude}`); } catch (error) { console.error(error.message); } }; return ( <div> {cities.map((cityName) => ( <button key={cityName} onClick={() => handleCityButtonClick(cityName)}> {cityName} </button> ))} {selectedCity && <p>Selected City: {selectedCity}</p>} </div> ); }

In this example, we have a simple Next.js page that displays buttons for different city names. When a button is clicked, it triggers the handleCityButtonClick function, which makes an API request to the Google Places API using the getCityCoordinates utility function. The API response contains the location coordinates (latitude and longitude) for the city, which can be used as needed in your application.

Remember to replace 'YOUR_GOOGLE_PLACES_API_KEY' in the API_KEY variable with your actual Google Places API key.

Keep in mind that the Google Places API has usage limits, so make sure to handle API requests responsibly and efficiently in your application. Additionally, consider error handling and edge cases, such as when the city name is not found or when the API response does not contain valid location coordinates.

Have questions or queries?
Get in Touch