Black screen in Google Map

Viewed 22

when I'm refreshing content of GoogleMap sometimes it blinks with black screen and then load map.

 GoogleMap(
                      // markers: getMarkers(),
                      myLocationEnabled: false,
                      zoomControlsEnabled: false,
                      zoomGesturesEnabled: true,
                      myLocationButtonEnabled: false,
                      mapType: MapType.normal,
                      initialCameraPosition: _kGooglePlex,
                      onMapCreated: (GoogleMapController controller) {
                        getCurrentLocation();
                        googleMapController = controller;
                        // mapController.complete(controller);
                      },
                      onCameraMove: (CameraPosition cameraPositions) {
                        cameraPosition = cameraPositions; //when map is
                      },
                      padding: const EdgeInsets.only(bottom: 15, left: 50),
                      onCameraIdle: _getAddress,
                    ),
1 Answers

yes sir. I also found that when I worked with GoogleMap package. what you need to do is show a widget until map fully appears

bool isMapLoading = true


GoogleMap(
  myLocationEnabled: false,
  zoomControlsEnabled: false,
  zoomGesturesEnabled: true,
  myLocationButtonEnabled: false,
  mapType: MapType.normal,
  initialCameraPosition: _kGooglePlex,
  onMapCreated: (GoogleMapController controller) {
  setState(() => isMapLoading = false),//here
  getCurrentLocation();
  googleMapController = controller;
  // mapController.complete(controller);
  },
  onCameraMove: (CameraPosition cameraPositions) {
      cameraPosition = cameraPositions; //when map is
   },
    padding: const EdgeInsets.only(bottom: 15, left: 50),
    onCameraIdle: _getAddress,
    initialCameraPosition: CameraPosition(
      target: LatLng(37.4220, -122.0841),
      zoom: 15,
    ),
  
  (isMapLoading )
      ? Container(
          height: size.height,
          width: size.width,
          color: Colors.grey[100],
          child: Center(
            child: CircularProgressIndicator(),
          ),
        )
      : Container(),
Related