feat: load Google Maps key dynamically from backend
- MapsService: obtiene la key via API e inyecta el script Maps JS en runtime - LocationPickerDialog: muestra error descriptivo si la key no esta configurada - index.html: eliminado script estatico de Maps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
863546f0fc
commit
4a2588f6f2
@@ -0,0 +1,60 @@
|
|||||||
|
import 'dart:async';
|
||||||
|
// ignore: avoid_web_libraries_in_flutter
|
||||||
|
import 'dart:js' as js;
|
||||||
|
import 'package:flutter/foundation.dart';
|
||||||
|
import 'package:prosapp_web_app/services/api_service.dart';
|
||||||
|
|
||||||
|
class MapsService {
|
||||||
|
static bool _loaded = false;
|
||||||
|
static Completer<bool>? _completer;
|
||||||
|
|
||||||
|
static Future<bool> load() async {
|
||||||
|
if (_loaded) return true;
|
||||||
|
if (_completer != null) return _completer!.future;
|
||||||
|
|
||||||
|
_completer = Completer<bool>();
|
||||||
|
|
||||||
|
try {
|
||||||
|
final data = await ApiService.instance.get('/settings/maps-key');
|
||||||
|
final apiKey = data['api_key'] as String? ?? '';
|
||||||
|
|
||||||
|
if (apiKey.isEmpty) {
|
||||||
|
debugPrint('MapsService: API key no configurada');
|
||||||
|
_completer!.complete(false);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (kIsWeb) {
|
||||||
|
_injectScript(apiKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
_loaded = true;
|
||||||
|
_completer!.complete(true);
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
debugPrint('MapsService: error cargando key — $e');
|
||||||
|
_completer!.complete(false);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static void _injectScript(String apiKey) {
|
||||||
|
// Verifica si ya está cargado
|
||||||
|
final existing = js.context.callMethod('eval', [
|
||||||
|
'typeof google !== "undefined" && typeof google.maps !== "undefined"'
|
||||||
|
]);
|
||||||
|
if (existing == true) {
|
||||||
|
_loaded = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
js.context.callMethod('eval', ['''
|
||||||
|
(function() {
|
||||||
|
var s = document.createElement('script');
|
||||||
|
s.src = 'https://maps.googleapis.com/maps/api/js?key=$apiKey';
|
||||||
|
s.async = true;
|
||||||
|
document.head.appendChild(s);
|
||||||
|
})();
|
||||||
|
''']);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -3,8 +3,8 @@ import 'package:flutter/material.dart';
|
|||||||
import 'package:geolocator/geolocator.dart';
|
import 'package:geolocator/geolocator.dart';
|
||||||
import 'package:google_maps_flutter/google_maps_flutter.dart';
|
import 'package:google_maps_flutter/google_maps_flutter.dart';
|
||||||
import 'package:http/http.dart' as http;
|
import 'package:http/http.dart' as http;
|
||||||
|
import 'package:prosapp_web_app/services/api_service.dart';
|
||||||
const _mapsApiKey = String.fromEnvironment('MAPS_API_KEY', defaultValue: '');
|
import 'package:prosapp_web_app/services/maps_service.dart';
|
||||||
|
|
||||||
class LocationResult {
|
class LocationResult {
|
||||||
final LatLng position;
|
final LatLng position;
|
||||||
@@ -38,10 +38,23 @@ class _LocationPickerDialogState extends State<LocationPickerDialog> {
|
|||||||
String _city = '';
|
String _city = '';
|
||||||
bool _loading = true;
|
bool _loading = true;
|
||||||
bool _geocoding = false;
|
bool _geocoding = false;
|
||||||
|
bool _mapsReady = false;
|
||||||
|
String? _mapsError;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
super.initState();
|
super.initState();
|
||||||
|
_initMaps();
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> _initMaps() async {
|
||||||
|
final ok = await MapsService.load();
|
||||||
|
if (!mounted) return;
|
||||||
|
if (!ok) {
|
||||||
|
setState(() { _loading = false; _mapsError = 'Google Maps no configurado. Configura la API Key en el panel de administración.'; });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setState(() => _mapsReady = true);
|
||||||
if (widget.initialPosition != null) {
|
if (widget.initialPosition != null) {
|
||||||
_position = widget.initialPosition!;
|
_position = widget.initialPosition!;
|
||||||
_loading = false;
|
_loading = false;
|
||||||
@@ -95,13 +108,15 @@ class _LocationPickerDialogState extends State<LocationPickerDialog> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Future<void> _reverseGeocode(LatLng pos) async {
|
Future<void> _reverseGeocode(LatLng pos) async {
|
||||||
if (_mapsApiKey.isEmpty) return;
|
final keyData = await ApiService.instance.get('/settings/maps-key').catchError((_) => <String, dynamic>{});
|
||||||
|
final apiKey = keyData['api_key'] as String? ?? '';
|
||||||
|
if (apiKey.isEmpty) return;
|
||||||
setState(() => _geocoding = true);
|
setState(() => _geocoding = true);
|
||||||
try {
|
try {
|
||||||
final url = Uri.parse(
|
final url = Uri.parse(
|
||||||
'https://maps.googleapis.com/maps/api/geocode/json'
|
'https://maps.googleapis.com/maps/api/geocode/json'
|
||||||
'?latlng=${pos.latitude},${pos.longitude}'
|
'?latlng=${pos.latitude},${pos.longitude}'
|
||||||
'&key=$_mapsApiKey'
|
'&key=$apiKey'
|
||||||
'&language=es',
|
'&language=es',
|
||||||
);
|
);
|
||||||
final res = await http.get(url);
|
final res = await http.get(url);
|
||||||
@@ -169,7 +184,16 @@ class _LocationPickerDialogState extends State<LocationPickerDialog> {
|
|||||||
|
|
||||||
// Map
|
// Map
|
||||||
Expanded(
|
Expanded(
|
||||||
child: _loading
|
child: _mapsError != null
|
||||||
|
? Center(child: Padding(
|
||||||
|
padding: const EdgeInsets.all(24),
|
||||||
|
child: Column(mainAxisSize: MainAxisSize.min, children: [
|
||||||
|
const Icon(Icons.map_outlined, size: 48, color: Colors.grey),
|
||||||
|
const SizedBox(height: 12),
|
||||||
|
Text(_mapsError!, textAlign: TextAlign.center, style: const TextStyle(color: Colors.grey)),
|
||||||
|
]),
|
||||||
|
))
|
||||||
|
: _loading
|
||||||
? const Center(child: CircularProgressIndicator())
|
? const Center(child: CircularProgressIndicator())
|
||||||
: Stack(
|
: Stack(
|
||||||
children: [
|
children: [
|
||||||
|
|||||||
@@ -16,8 +16,6 @@
|
|||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.flutterWebRenderer = 'html';
|
window.flutterWebRenderer = 'html';
|
||||||
</script>
|
</script>
|
||||||
<!-- Google Maps JS API — reemplazar GOOGLE_MAPS_API_KEY con la key real -->
|
|
||||||
<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_API_KEY"></script>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|||||||
Reference in New Issue
Block a user