google_map_custom_info_window #

A Flutter package to show fully customizable info windows for markers on Google Maps.
This works with google_maps_flutter on mobile and web, allowing you to replace the default info window with any Flutter widget.

✨ Features #

• 📌 Display custom widgets as Google Maps info windows
• 🎨 Fully customizable UI (colors, text, icons, etc.)
• 🔄 Works with both Android/iOS and Web
• 🔒 Handles close button and dynamic resizing
• 🚀 Easy integration with existing Google Maps code

📦 Installation #

📷 Demo #

(Replace with your real screenshot)

Add to your pubspec.yaml:

dependencies:
  google_map_custom_info_window: ^0.0.1



## Usage

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_map_custom_info_window/google_map_custom_info_window.dart';

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  final Set<Marker> _markers = {};
  bool _showWindow = false;

  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,
            onTap: (_) => setState(() => _showWindow = false),
          ),
          if (_showWindow)
            Positioned(
              left: 100,
              top: 200,
              child: CustomInfoWindow(
                title: "Marker Info",
                onClose: () => setState(() => _showWindow = false),
              ),
            ),
        ],
      ),
    );
  }
}