Josef Pa
 · Problem, Idea, Design, Build, Repeat

CORS Issues with Google Places

Sure it works with the extension but users wont use the extension? 
Any Solutions?

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:flutter/foundation.dart';
import 'package:flutter_google_places/flutter_google_places.dart';
import 'package:google_api_headers/google_api_headers.dart';
import 'package:collection/collection.dart';
import 'package:google_maps_webservice/places.dart';

import '/flutter_flow/flutter_flow_place_picker.dart';
import '/flutter_flow/flutter_flow_widgets.dart';
import '/flutter_flow/place.dart';
import 'dart:io';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';

// Define your API keys here (replace with your actual keys)
final String iOSGoogleMapsApiKey = 'YOUR_IOS_API_KEY';
final String androidGoogleMapsApiKey = 'YOUR_ANDROID_API_KEY';
final String webGoogleMapsApiKey = 'YOUR_WEB_API_KEY';

String? _selectedPlace;

String get googleMapsApiKey {
  if (kIsWeb) {
    return webGoogleMapsApiKey;
  }
  switch (defaultTargetPlatform) {
    case TargetPlatform.macOS:
    case TargetPlatform.windows:
      return '';
    case TargetPlatform.iOS:
      return iOSGoogleMapsApiKey;
    case TargetPlatform.android:
      return androidGoogleMapsApiKey;
    default:
      return webGoogleMapsApiKey;
  }
}

Future<FFPlace?> latLangPicker(BuildContext context) async {
  final p = await PlacesAutocomplete.show(
    context: context,
    apiKey: googleMapsApiKey,
    onError: (response) => print(
        'Error occurred when getting places response: ${response.errorMessage}'),
    mode: Mode.overlay,
    types: [],
    components: [],
    strictbounds: false,
    proxyBaseUrl: null,
  );

  if (p == null) {
    return null;
  }

  final placeId = p.placeId;
  if (placeId == null) {
    return null;
  }

  GoogleMapsPlaces _places = GoogleMapsPlaces(
    apiKey: googleMapsApiKey,
    apiHeaders: await const GoogleApiHeaders().getHeaders(),
    baseUrl: kIsWeb
        ? 'https://app.cors.bridged.cc/https://maps.googleapis.com/maps/api'
        : null,
  );

  PlacesDetailsResponse detail = await _places.getDetailsByPlaceId(placeId);

  _selectedPlace = detail.result.name;

  return FFPlace(
    latLng: LatLng(
      detail.result.geometry?.location.lat ?? 0,
      detail.result.geometry?.location.lng ?? 0,
    ),
    name: detail.result.name,
    address: detail.result.formattedAddress ?? '',
    city: detail.result.addressComponents
            .firstWhereOrNull((element) => element.types.contains('locality'))
            ?.shortName ??
        '',
    state: detail.result.addressComponents
            .firstWhereOrNull((element) =>
                element.types.contains('administrative_area_level_1'))
            ?.shortName ??
        '',
    country: detail.result.addressComponents
            .firstWhereOrNull((element) => element.types.contains('country'))
            ?.shortName ??
        '',
    zipCode: detail.result.addressComponents
            .firstWhereOrNull(
                (element) => element.types.contains('postal_code'))
            ?.shortName ??
        '',
  );
}
2 replies