Show Multiple Markers on Google Maps - Flutter

Hello Guys in previous post we learnt how to show google maps in flutter.
In this post we are going to learn about how to show multiple markers on the map

Here we are using google_maps_plugin to show Google Maps.

GoogleMaps widget contains property markers , with this we are going to show the Markers on Map. 

So lets add Markers to Map.

How will create Markers?


 
Marker marker=Marker(markerId: MarkerId("Current"),
position: LatLng(17.385044, 78.486671),);

 

For create marker we need to pass MarkerId  & Position to the Marker

So here MarkerId("Current") is the Marker Id for the Marker.

We  can differ this in below way

MarkerId markerId1 = MarkerId("1");

Marker marker1=Marker(markerId: markerId1,
position: LatLng(17.385044, 78.486671), 
icon: BitmapDescriptor.
defaultMarkerWithHue
(BitmapDescriptor.hueCyan),);

 

To add this markers to GoogleMaps markers property we need to pass it as  set  type.

So lets create HashMap of Type Markers and add this markers to it.

Map markers = {};
markers[markerId]=marker1;
Now we are ready with our Marker data, we need to pass this marker data to GoogleMap

markers: Set.of(markers.values)

 

Now lets run the app, you will able to see the Marker on the Map.

How to add Multiple markers?

MarkerId markerId2 = MarkerId("2");
MarkerId markerId3 = MarkerId("3");


Marker marker2=Marker(markerId2: markerId,
position: LatLng(17.4399, 78.4983),
 icon: BitmapDescriptor.defaultMarkerWithHue
(BitmapDescriptor.hueCyan),);
Marker marker3=Marker(markerId2: markerId,
position: LatLng(17.9689, 79.5941),
 icon: BitmapDescriptor.defaultMarkerWithHue(
BitmapDescriptor.hueCyan),);

markers[markerId1]=marker1;
markers[markerId2]=marker2;
markers[markerId3]=marker3;

 

So now we are able to see multiple Markers on Maps.

How to add InfoWindow for markers?
Marker() has property with infoWindow, this infoWindoe has properties like  title,snippet,....

by adding the below code will show the infoWindow for the Marker

infoWindow: InfoWindow(
  title: "Name",
  snippet: "Address",
)

How to add Event For infoWindow?
With the onTap functionality of InfoWindow, we can handle event for infoWindow
onTap: (){

                var  bottomSheetController=scaffoldKey.currentState.
showBottomSheet((context) => Container(
                  child: getBottomSheet("17.4435, 78.3772"),
                  height: 250,
                  color: Colors.transparent,
                  ));
}

 

Here we are showing the BottomSheet window on tap on infoWindow of Marker

 Lets see complete code

import 'dart:async';

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

class MyMaps extends StatefulWidget{
  @override
  State createState() {
    // TODO: implement createState
    return MyMapsState();
  }

}
class MyMapsState extends State{
  final GlobalKey scaffoldKey = GlobalKey();

  Completer _controller = Completer();
  Map markers = {};
  static final CameraPosition _kGooglePlex = 
CameraPosition(
    target: LatLng(17.4435, 78.3772),
    zoom: 14.0,
  );
  ListlistMarkerIds=List();
  //final MarkerId markerId = MarkerId("current");
  @override
  void initState() {
    // TODO: implement initState
    super.initState();


  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(leading: Icon(Icons.map),
backgroundColor: Colors.blue,title: 
Text("Google Maps With Markers"),),
      body: Container(
        child: GoogleMap(initialCameraPosition: _kGooglePlex,

          onTap: (_){

          },
          mapType: MapType.normal,
          markers: Set.of(markers.values),

          onMapCreated: (GoogleMapController controler){
            _controller.complete(controler);

            MarkerId markerId1 = MarkerId("1");
            MarkerId markerId2 = MarkerId("2");
            MarkerId markerId3 = MarkerId("3");

            listMarkerIds.add(markerId1);
            listMarkerIds.add(markerId2);
            listMarkerIds.add(markerId3);


            Marker marker1=Marker(markerId: markerId1,
position: LatLng(17.4435, 78.3772),
              icon: BitmapDescriptor.defaultMarkerWithHue(
BitmapDescriptor.hueCyan),
infoWindow: InfoWindow(
                  title: "Hytech City",onTap: (){

                var  bottomSheetController=scaffoldKey.currentState.
showBottomSheet((context) => Container(
                  child: 
getBottomSheet("17.4435, 78.3772"),
                  height: 250,
                  color: Colors.transparent,
                  ));

                },snippet: "Snipet Hitech City"
                ));

            Marker marker2=Marker(markerId: markerId2,
position: LatLng(17.4837, 78.3158),
 icon: 
BitmapDescriptor.defaultMarkerWithHue
(BitmapDescriptor.hueGreen),);
            Marker marker3=
Marker(markerId: 
markerId3,position:
 LatLng(17.5169, 78.3428),
infoWindow: InfoWindow(
                title: "Miyapur",onTap: (){},snippet: "Miyapur"
            ));

            setState(() {
              markers[markerId1]=marker1;
              markers[markerId2]=marker2;
              markers[markerId3]=marker3;
            });
          },

        ),
      )
    );
  }

  Widget getBottomSheet(String s)
  {
    return Stack(
      children: [
        Container(

          margin: EdgeInsets.only(top: 32),
          color: Colors.white,
          child: Column(
            children: [
              Container(
                color: Colors.blueAccent,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("Hytech City Public School \n CBSC",style: TextStyle(
                          color: Colors.white,
                          fontSize: 14
                      ),),
                      SizedBox(height: 5,),
                      Row(children: [

                        Text("4.5",style: TextStyle(
                            color: Colors.white,
                            fontSize: 12
                        )),
                        Icon(Icons.star,color: Colors.yellow,),
                        SizedBox(width: 20,),
                        Text("970 Folowers",style: TextStyle(
                            color: Colors.white,
                            fontSize: 14
                        ))
                      ],),
                      SizedBox(height: 5,),
                      Text("Memorial Park",style: TextStyle(
                          color: Colors.white,
                          fontSize: 14
                      )),
                    ],
                  ),
                ),
              ),
              SizedBox(height: 20,),
              Row(
                children: [SizedBox(width: 20,),
Icon(Icons.map,color: Colors.blue,),
SizedBox(width: 20,),Text("$s")],
              ),
              SizedBox(height: 20,),
              Row(
                children: [SizedBox(width: 20,),
Icon(Icons.call,color: Colors.blue,),
SizedBox(width: 20,),
Text("040-123456")],
              )
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Align(
            alignment: Alignment.topRight,

            child: FloatingActionButton(
                child: Icon(Icons.navigation),
                onPressed: (){

                }),
          ),
        )
      ],

    );
  }

}

 


Subscribe For Daily Updates