Integrate Places API in a Flutter app

You want to integrate Google Places API into your Flutter app, but you’re open to doing the actual API calls either directly from the Flutter client or via your Java backend.

Let’s break it down into two main approaches with pros/cons, and then I’ll give you step-by-step guidance for each.

---

Option 1 — Client-side integration (Flutter directly calls Google Places API)

Pros:

• Simpler setup (no need to add backend endpoints for Places).
• Lower latency (Flutter talks directly to Google).

Cons:

• You must expose your API key in the app (even with restrictions, it’s still in the APK).
• If you need sensitive billing protection or want to hide logic, this isn’t ideal.

Steps:

1. Enable Google Places API in Google Cloud Console.
2. Create an API key
   • Restrict it to Android/iOS apps by package name & SHA fingerprint.
   • Enable only Places API.
3. Add HTTP or a Flutter plugin for API calls:
   • Plugin option: flutter_google_places (wraps autocomplete, place details, etc.).
   • Manual option: use http package to call https://maps.googleapis.com/maps/api/place/autocomplete/json or place/details/json.
4. Example with flutter_google_places:

   import 'package:flutter/material.dart';
   import 'package:flutter_google_places/flutter_google_places.dart';
   import 'package:google_maps_webservice/places.dart';
   
   const kGoogleApiKey = "YOUR_API_KEY";
   final places = GoogleMapsPlaces(apiKey: kGoogleApiKey);
   
   class MyHomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: ElevatedButton(
             onPressed: () async {
               Prediction? p = await PlacesAutocomplete.show(
                 context: context,
                 apiKey: kGoogleApiKey,
                 mode: Mode.overlay, // or Mode.fullscreen
                 language: "en",
                 components: [Component(Component.country, "us")],
               );
               print(p?.description);
             },
             child: Text("Search Place"),
           ),
         ),
       );
     }
   }
   

---

Option 2 — Server-side integration (Java backend calls Google Places API)

Pros:

• API key is never exposed to client.
• You can add custom business logic, caching, and rate-limiting.
• Safer for billing control.

Cons:

• Slightly more complex setup.
• Slightly higher latency because requests go through your backend.

Steps:

1. Enable Google Places API in Google Cloud Console.
2. Create an API key
   • Restrict it to server IPs only.
3. In your Java backend (Spring Boot example):

   @RestController
   public class PlacesController {
   
       private static final String API_KEY = "YOUR_SERVER_API_KEY";
       private static final String AUTOCOMPLETE_URL =
           "https://maps.googleapis.com/maps/api/place/autocomplete/json";
   
       @GetMapping("/places/autocomplete")
       public ResponseEntity<String> autocomplete(@RequestParam String input) {
           String url = AUTOCOMPLETE_URL + "?input=" + URLEncoder.encode(input, StandardCharsets.UTF_8) 
                        + "&key=" + API_KEY;
           RestTemplate restTemplate = new RestTemplate();
           String result = restTemplate.getForObject(url, String.class);
           return ResponseEntity.ok(result);
       }
   }
   

4. From Flutter, just call your backend:

   import 'package:http/http.dart' as http;
   
   Future<void> searchPlaces(String query) async {
     final response = await http.get(
       Uri.parse("https://your-backend.com/places/autocomplete?input=$query")
     );
     print(response.body);
   }
   

---

Recommendation

• If this is a public app with billing-sensitive Google API usage, go server-side (Java backend).
• If it’s a quick prototype or an internal app, client-side is faster to build.

---

Legacy API

Google has the old api as “legacy”: https://developers.google.com/maps/legacy ( legacy date – March 1, 2025 ), so whatever we integrate – it should be the newer one.

The newer one are subject to free tier and fees after some level of usage.https://developers.google.com/maps/billing-and-pricing/pricing