1 | initial version |
To display a Custom Info Window on a Google Map in Flutter, you need to follow these steps:
dependencies:
google_maps_flutter: ^1.1.1
import 'package:google_maps_flutter/google_maps_flutter.dart';
GoogleMap(
initialCameraPosition: CameraPosition(target: LatLng(37.4220, -122.0841), zoom: 15),
markers: Set<Marker>.of(markers.values),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
onTap: (LatLng latLng) {
_showMarkerInfoWindow(null);
},
),
void _showMarkerInfoWindow(MarkerId markerId) {
if (markerId != null && markers.containsKey(markerId)) {
final Marker marker = markers[markerId];
setState(() {
selectedMarker = marker;
showInfoWindow = true;
});
} else {
setState(() {
selectedMarker = null;
showInfoWindow = false;
});
}
}
Widget _buildCustomInfoWindow(BuildContext context) {
if (!showInfoWindow || selectedMarker == null) {
return SizedBox.shrink();
}
return Align(
alignment: Alignment.topCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.white,
),
width: 300,
height: 100,
child: Center(
child: Text(selectedMarker.title),
),
),
);
}
Stack(
children: <Widget>[
GoogleMap(
...
),
_buildCustomInfoWindow(context),
],
);
These are the basic steps to create and display a Custom Info Window on a Google Map in Flutter.