Flutter Google Maps Custom Marker

This article explains you how you can integrate google maps with custom marker in flutter applications. We are using google_maps_flutter package to integrate google maps in flutter applications.

Nowadays google maps are very useful to locate destinations in mobile applications in daily life. You can also get information on particular place in google maps. In this flutter google maps example, we are rendering custom maker on popular tourist attractions of barcelona city in google maps.

Add required dependency in your pubspec.yaml file

Creating Api Keys

To integrate google maps in our flutter application, first we need to create project in google cloud console. Then we need to enable Maps SDK for Android and Maps SDK for iOS apis. After that we need to create api keys for android and ios platforms. You can also create single key for both platforms if you do not restrict key for single platform.

Changes for Android Platform

Now we are submitting api key in android manifest file. We are also adding internet permission to use it.

Changes for iOS Platform

In iOS Platform, You need to add api key in AppDelegate.swift file. We also must add key and description in info.plist file.

AppDelegate.swift

Info.plist

Integrate Google Map Widget

GoogleMap widget provides different parameters like mapType, onMapCreated, initialCameraPosition etc. mapType provides four types of maps: normal, satellite, terrain, hybrid. normal map contains traffic and labels. satellite map contains aerial photos of locations. terrain map contains type and height of terrain. hybrid map contains satellite images with labels.

onMapCreated method requires GoogleMapController object as parameter and is called when map is created. We can set initial google map position using initialCameraPosition parameter. CameraPosition class provides four attributes. target attribute provides latitude and longitude to set map initially. bearing attribute provides direction of camera. tilt attribute sets camera angle with location. zoom attribute helps to adjust camera position.

Change Map Type

We are adding floating button over the google map to change google map type.

Add Markers

markerId identifies each marker uniquely. We can set marker location using position parameter. We can display marker title onTap using InfoWindow parameter.

Custom Marker For Flutter Google Maps

We can also customize default marker. We can change color of default marker.

We can also use our image as custom marker in google maps. For this we need to add image in images folder and provides image path in pubspec.yaml file.

Final Code

import 'dart:async';

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

class GoogleMapsPage extends StatefulWidget {
  String title;

  GoogleMapsPage({this.title});

  @override
  _GoogleMapsPageState createState() => _GoogleMapsPageState();
}

class _GoogleMapsPageState extends State<GoogleMapsPage> {
  Completer<GoogleMapController> _controller = Completer();
  final Set<Marker> listMarkers = {};
  MapType currentMapType = MapType.normal;
  BitmapDescriptor customIcon;

  static final CameraPosition initCameraPosition = CameraPosition(
      bearing: 30,
      target: LatLng(41.39641729508688, 2.161925892612031),
      tilt: 45,
      zoom: 13.5);

  @override
  Widget build(BuildContext context) {
    listMarkers.add(Marker(
      markerId: MarkerId("1"),
      position: LatLng(41.40442592799307, 2.1761136771317475),
      infoWindow: InfoWindow(title: "La Sagrada Familia"),
      icon: customIcon
    ));

    listMarkers.add(Marker(
        markerId: MarkerId("2"),
        position: LatLng(41.39641729508688, 2.161925892612031),
        infoWindow: InfoWindow(title: "Casa Mila"),
        icon: customIcon));

    listMarkers.add(Marker(
        markerId: MarkerId("3"),
        position: LatLng(41.38840767527953, 2.173175802559483),
        infoWindow: InfoWindow(title: "Placa de Catalunya"),
        icon: customIcon));

    listMarkers.add(Marker(
        markerId: MarkerId("4"),
        position: LatLng(41.41503960716928, 2.1570586431097203),
        infoWindow: InfoWindow(title: "Park Guell"),
        icon: customIcon));

    return Scaffold(
        appBar: AppBar(title: Text(widget.title)),
        body: Stack(
          children: [
            GoogleMap(
              mapType: currentMapType,
              onMapCreated: (GoogleMapController controller) {
                _controller.complete(controller);
              },
              initialCameraPosition: initCameraPosition,
              compassEnabled: true,
              markers: listMarkers,
            ),
            Container(
              padding: EdgeInsets.all(15),
              alignment: Alignment.topRight,
              child: FloatingActionButton(
                child: Icon(Icons.map, size: 30),
                onPressed: _onMapTypeChanged,
              ),
            )
          ],
        ));
  }

  void _onMapTypeChanged() {
    setState(() {
      currentMapType = currentMapType == MapType.normal ? MapType.satellite : MapType.normal;
    });
  }

  void setCustomMarker() async {
    customIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5), 'images/custom_marker.png');
  }

  @override
  void initState() {
    super.initState();
    setCustomMarker();
  }
}