Using Maps & Location Services in Flutter Apps

Introduction

Maps and location services are integral to context-aware mobile apps. Flutter’s ecosystem offers powerful plugins to integrate mapping and geolocation with minimal boilerplate. In this tutorial, we’ll cover how to configure API keys, install the Google Maps plugin, fetch device location, and render an interactive map with user positioning and custom markers.

Configuring API Keys & Setup

Before writing Dart code, obtain a Google Maps API key:

• Create or select a project in the Google Cloud Console.

• Enable “Maps SDK for Android” and “Maps SDK for iOS.”

• Generate and restrict your API key for Android package names and iOS bundle IDs.

Android setup:

• In android/app/src/main/AndroidManifest.xml, add:

  <meta-data android:name="com.google.android.geo.API_KEY"
             android:value="YOUR_API_KEY"
  
  

  iOS setup:

• In ios/Runner/Info.plist, insert:

  <key>GMSApiKey</key>
  <string>YOUR_API_KEY</string
  
  

  Ensure network permissions are declared in both platforms (INTERNET, ACCESS_FINE_LOCATION on Android; NSLocationWhenInUseUsageDescription on iOS).

Installing and Initializing the Google Maps Plugin

Add the Google Maps plugin to pubspec.yaml:

dependencies:
  google_maps_flutter: ^2.2.3
  geolocator

Run flutter pub get.

In your main.dart:

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

void main() => runApp(MaterialApp(home: MapSample()));

class MapSample extends StatefulWidget {
  @override
  _MapSampleState createState() => _MapSampleState();
}

class _MapSampleState extends State<MapSample> {
  GoogleMapController? _controller;
  final CameraPosition _initialPosition =
      CameraPosition(target: LatLng(37.7749, -122.4194), zoom: 12);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: _initialPosition,
        onMapCreated: (controller) => _controller = controller,
      ),
    );
  }
}

This renders a bare map centered on San Francisco. Next, we’ll fetch the user’s real location and update the map.

Accessing Device Location

Use the geolocator plugin to request permissions and acquire coordinates:

import 'package:geolocator/geolocator.dart';

Future<Position> _getUserLocation() async {
  LocationPermission permission =
      await Geolocator.requestPermission();
  if (permission == LocationPermission.denied) {
    throw Exception('Location permission denied');
  }
  return await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high);
}

Call this method in initState or via a button, then animate the map camera:

void _moveToUser() async {
  final pos = await _getUserLocation();
  _controller?.animateCamera(
    CameraUpdate.newLatLng(LatLng(pos.latitude, pos.longitude)),
  );
}

Displaying & Customizing Maps

With the user’s position in hand, add a marker and customize the map:

Set<Marker> _markers = {};

void _addUserMarker(Position pos) {
  final marker = Marker(
    markerId: MarkerId('user_marker'),
    position: LatLng(pos.latitude, pos.longitude),
    infoWindow: InfoWindow(title: 'You are here'),
  );
  setState(() => _markers.add(marker));
}

Update the GoogleMap widget:

GoogleMap(
  markers: _markers,
  mapType: MapType.normal,
  zoomControlsEnabled: false,
  initialCameraPosition: _initialPosition,
)

Combine camera movement and marker placement after fetching location:

void _locateAndMark() async {
  final pos = await _getUserLocation();
  _controller?.animateCamera(
    CameraUpdate.newLatLngZoom(LatLng(pos.latitude, pos.longitude), 15),
  );
  _addUserMarker(pos);
}

Call _locateAndMark from a FloatingActionButton to let users center the map on their current location with a single tap.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

You now have a Flutter app that fetches device location and displays it on a Google Map with custom markers and camera controls. From here, explore clustering, polylines, and rich interactivity to build location-aware features like routing, geofencing, and live tracking. Flutter’s plugin ecosystem makes mobile mapping fast and flexible.