google_map_custom_info_widow 0.0.1

A Flutter package to show custom info windows on Google Maps markers.

example/main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_map_custom_info_widow/google_map_custom_info_widow.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MapScreen());
  }
}

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});
  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  final Completer<GoogleMapController> _controller = Completer();
  final Set<Marker> _markers = {};
  bool _showWindow = false;
  Offset? _offset;

  static const CameraPosition _start = CameraPosition(
    target: LatLng(11.574223, 104.9244571),
    zoom: 14,
  );

  @override
  void initState() {
    super.initState();
    _markers.add(
      const Marker(
        markerId: MarkerId("1"),
        position: LatLng(11.574223, 104.9244571),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          GoogleMap(
            initialCameraPosition: _start,
            markers: _markers,
            onMapCreated: (c) => _controller.complete(c),
            onTap: (_) => setState(() => _showWindow = false),
            onCameraMove: (_) => setState(() {}),
            onCameraIdle: () => setState(() {}),
          ),
          if (_showWindow && _offset != null)
            Positioned(
              left: _offset!.dx - 125,
              top: _offset!.dy - 100,
              child: CustomInfoWindow(
                title: "Marker Info",
                onClose: () => setState(() => _showWindow = false),
              ),
            ),
        ],
      ),
    );
  }
}