I have problem when i click on Select on Map and select a location and return, there no static map appears and i get this error:
════════ Exception caught by image resource service
════════════════════════════ The following NetworkImageLoadException
was thrown resolving an image codec: HTTP request failed, statusCode:403,
https://maps.googleapis.com/maps/api/staticmap?center=&37.41949787164601,-122.06555999815463&zoom=13&size=600x300&maptype=roadmap&markers=color:red%7Clabel:C%7C37.41949787164601,-122.06555999815463&key="My API KEY"
Note: I enable both Maps Static API and Maps SDK for Android
This is LocationHelper class
class LocationHelper {
static String generateLocationPreviewImage({
double latitude,
double longitude,
}) {
return 'https://maps.googleapis.com/maps/api/staticmap?center=&$latitude,$longitude&zoom=13&size=600x300&maptype=roadmap&markers=color:red%7Clabel:C%7C$latitude,$longitude&key=$GOOGLE_API_KEY';
}
static Future<String> getPlaceAddress(double lat, double lng) async {
final url =
'https://maps.googleapis.com/maps/api/geocode/json?latlng=$lat,$lng&key=$GOOGLE_API_KEY';
final response = await http.get(Uri.parse(url));
return json.decode(response.body)['results'][0]['formatted_address'];
}
}
and here where i use it
import 'package:flutter/material.dart';
import 'package:location/location.dart';
import '../screens/map_screen.dart';
import '../helpers/location_helper.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class LocationInput extends StatefulWidget {
final Function onSelectPlace;
LocationInput(this.onSelectPlace);
@override
_LocationInputState createState() => _LocationInputState();
}
class _LocationInputState extends State<LocationInput> {
String _previewImageUrl;
void _showPreview(double lat, double lng) {
final staticMapImageUrl = LocationHelper.generateLocationPreviewImage(
latitude: lat, longitude: lng);
setState(() {
_previewImageUrl = staticMapImageUrl;
});
}
Future<void> _getCurrentLocation() async {
try {
final locData = await Location().getLocation();
_showPreview(locData.latitude, locData.longitude);
widget.onSelectPlace(locData.latitude, locData.longitude);
} catch (error) {
return;
}
}
Future<void> _selectOnMap() async {
final selectedLocation = await Navigator.of(context).push<LatLng>(
MaterialPageRoute(
fullscreenDialog: true,
builder: (cxt) => MapScreen(
isSelecting: true,
),
),
);
if (selectedLocation == null) {
return;
}
// selectedLocation has longitude and latitude of the location which the user had selected
//print(selectedLocation.latitude);
_showPreview(selectedLocation.latitude, selectedLocation.longitude);
widget.onSelectPlace(selectedLocation.latitude, selectedLocation.longitude);
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
height: 170,
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.grey,
),
),
child: _previewImageUrl == null
? Text(
'No Loaction is Selected',
textAlign: TextAlign.center,
)
: Image.network(
_previewImageUrl,
fit: BoxFit.cover,
width: double.infinity,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton.icon(
icon: Icon(Icons.location_on),
label: Text('Current Location'),
textColor: Theme.of(context).primaryColor,
onPressed: _getCurrentLocation,
),
FlatButton.icon(
icon: Icon(Icons.map),
label: Text('Select on Map'),
textColor: Theme.of(context).primaryColor,
onPressed: _selectOnMap,
),
],
)
],
);
}
}