In this flutter Google maps tutorials we are going to learn how to show multiple markers on google maps. To show Google Maps we required Google Maps key which we can get from Google Maps console. To know more about how to show Google maps with flutter in the previous example. To load google maps with flutter we are using google_maps_plugin dependency. This Google Maps plugin updated with null safety feature. GoogleMaps widget contains property markers, with this we are going to show the Markers on Map. In this example we will cover So let's get started Step 1: Create flutter project Step 2: Add required dependencies to pubspec.yaml file Step 3: How will create Markers? To create a 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 To add these markers to GoogleMap markers property we need to pass it to Set type. So let's create a HashMap of Type Markers and add these markers to it. Now we are ready with our Marker data, we need to pass this marker data to GoogleMap Now let's run the app, you will able to see the Marker on the Map. Step 4: How to add Multiple markers? So now we are able to see multiple Markers on Maps. Step 5: How to add InfoWindow for markers? Marker() has property with infoWindow, this infoWindow has properties like title,snippet,.... by adding the below code will show the infoWindow for the Marker Step 6: How to add Event For infoWindow? With the onTap() functionality of InfoWindow, we can handle event for infoWindow Here we are showing the BottomSheet window on tap on infoWindow of Marker Complete code for Show Multiple Markers on Google Maps main.dart Drawing Route Lines in Google Maps between Two Location in Flutter Tags: Google Maps, Multiple Markers on Google Maps Flutter, Draw Route Between Two Location - Flutter
dev_dependencies:
flutter_test:
sdk: flutter
google_maps_flutter: ^2.0.6
Marker marker=Marker(markerId: MarkerId("Current"),
position: LatLng(17.4435, 78.3772)
;
Marker marker1=Marker(
markerId: markerId1,
position: LatLng(17.4435, 78.3772),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueCyan),
infoWindow: InfoWindow(
title: "Hytech City",onTap: (){
},snippet: "Snipet Hitech City"
));
Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
markers[markerId1]=marker1;
markers: Set<Marker>.of(markers.values),
MarkerId markerId1 = MarkerId("1");
MarkerId markerId2 = MarkerId("2");
MarkerId markerId3 = MarkerId("3");
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;
});
infoWindow: InfoWindow(
title: "Miyapur",onTap: (){},
snippet: "Miyapur"
)
onTap: (){
var bottomSheetController=scaffoldKey.currentState!.showBottomSheet((context) => Container(
child: getBottomSheet("17.4435, 78.3772"),
height: 250,
color: Colors.transparent,
));
}
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class MyMaps extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return MyMapsState();
}
}
class MyMapsState extends State<MyMaps>{
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
Completer<GoogleMapController> _controller = Completer();
Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(17.4435, 78.3772),
zoom: 14.0,
);
List<MarkerId>listMarkerIds=List<MarkerId>.empty(growable: true);
//final MarkerId markerId = MarkerId("current");
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
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<Marker>.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: <Widget>[
Container(
margin: EdgeInsets.only(top: 32),
color: Colors.white,
child: Column(
children: <Widget>[
Container(
color: Colors.blueAccent,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Hytech City Public School \n CBSC",style: TextStyle(
color: Colors.white,
fontSize: 14
),),
SizedBox(height: 5,),
Row(children: <Widget>[
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: <Widget>[SizedBox(width: 20,),Icon(Icons.map,color: Colors.blue,),SizedBox(width: 20,),Text("$s")],
),
SizedBox(height: 20,),
Row(
children: <Widget>[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: (){
}),
),
)
],
);
}
}
import 'package:flutter/material.dart';
import 'googlemaps.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Google Maps With Markers',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyMaps(),
);
}
}
|
Article Contributed By :
|
|
|
|
|
23614 Views |
|