Skip to content

Commit 63c0d43

Browse files
committed
Add AdvancedMarker examples (iOS)
1 parent cde0ca1 commit 63c0d43

File tree

10 files changed

+362
-20
lines changed

10 files changed

+362
-20
lines changed

packages/google_maps_flutter/google_maps_flutter_android/example/lib/advanced_markers_clustering.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import 'page.dart';
77

88
/// Page for demonstrating advanced marker clustering support.
99
/// Same as [ClusteringPage] but works with [AdvancedMarker].
10-
class AdvancedMarkersClustering extends GoogleMapExampleAppPage {
10+
class AdvancedMarkersClusteringPage extends GoogleMapExampleAppPage {
1111
/// Default constructor.
12-
const AdvancedMarkersClustering({Key? key})
12+
const AdvancedMarkersClusteringPage({Key? key})
1313
: super(
1414
key: key,
1515
const Icon(Icons.place_outlined),

packages/google_maps_flutter/google_maps_flutter_android/example/lib/main.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ final List<GoogleMapExampleAppPage> _allPages = <GoogleMapExampleAppPage>[
5555
const TileOverlayPage(),
5656
const GroundOverlayPage(),
5757
const ClusteringPage(),
58-
const AdvancedMarkersClustering(),
58+
const AdvancedMarkersClusteringPage(),
5959
const MapIdPage(),
6060
];
6161

packages/google_maps_flutter/google_maps_flutter_ios/example/ios14/lib/main.dart

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
// found in the LICENSE file.
44

55
import 'package:flutter/material.dart';
6+
import 'package:maps_example_dart/advanced_marker_icons.dart';
7+
import 'package:maps_example_dart/advanced_markers_clustering.dart';
68
import 'package:maps_example_dart/animate_camera.dart';
79
import 'package:maps_example_dart/clustering.dart';
810
import 'package:maps_example_dart/ground_overlay.dart';
@@ -16,6 +18,7 @@ import 'package:maps_example_dart/marker_icons.dart';
1618
import 'package:maps_example_dart/move_camera.dart';
1719
import 'package:maps_example_dart/padding.dart';
1820
import 'package:maps_example_dart/page.dart';
21+
import 'package:maps_example_dart/place_advanced_marker.dart';
1922
import 'package:maps_example_dart/place_circle.dart';
2023
import 'package:maps_example_dart/place_marker.dart';
2124
import 'package:maps_example_dart/place_polygon.dart';
@@ -24,6 +27,10 @@ import 'package:maps_example_dart/scrolling_map.dart';
2427
import 'package:maps_example_dart/snapshot.dart';
2528
import 'package:maps_example_dart/tile_overlay.dart';
2629

30+
/// Map Id is required for some examples to use advanced markers
31+
// ignore: unnecessary_nullable_for_final_variable_declarations, unreachable_from_main
32+
const String? mapId = null;
33+
2734
void main() {
2835
runApp(const MaterialApp(
2936
home: MapsDemo(<GoogleMapExampleAppPage>[
@@ -33,7 +40,9 @@ void main() {
3340
AnimateCameraPage(),
3441
MoveCameraPage(),
3542
PlaceMarkerPage(),
43+
PlaceAdvancedMarkerPage(mapId: mapId),
3644
MarkerIconsPage(),
45+
AdvancedMarkerIconsPage(mapId: mapId),
3746
ScrollingMapPage(),
3847
PlacePolylinePage(),
3948
PlacePolygonPage(),
@@ -44,6 +53,7 @@ void main() {
4453
TileOverlayPage(),
4554
GroundOverlayPage(),
4655
ClusteringPage(),
56+
AdvancedMarkersClusteringPage(mapId: mapId),
4757
MapIdPage(),
4858
])));
4959
}

packages/google_maps_flutter/google_maps_flutter_ios/example/ios15/lib/main.dart

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
// found in the LICENSE file.
44

55
import 'package:flutter/material.dart';
6+
import 'package:maps_example_dart/advanced_marker_icons.dart';
7+
import 'package:maps_example_dart/advanced_markers_clustering.dart';
68
import 'package:maps_example_dart/animate_camera.dart';
79
import 'package:maps_example_dart/clustering.dart';
810
import 'package:maps_example_dart/ground_overlay.dart';
@@ -16,6 +18,7 @@ import 'package:maps_example_dart/marker_icons.dart';
1618
import 'package:maps_example_dart/move_camera.dart';
1719
import 'package:maps_example_dart/padding.dart';
1820
import 'package:maps_example_dart/page.dart';
21+
import 'package:maps_example_dart/place_advanced_marker.dart';
1922
import 'package:maps_example_dart/place_circle.dart';
2023
import 'package:maps_example_dart/place_marker.dart';
2124
import 'package:maps_example_dart/place_polygon.dart';
@@ -24,6 +27,10 @@ import 'package:maps_example_dart/scrolling_map.dart';
2427
import 'package:maps_example_dart/snapshot.dart';
2528
import 'package:maps_example_dart/tile_overlay.dart';
2629

30+
/// Map Id is required for some examples to use advanced markers
31+
// ignore: unnecessary_nullable_for_final_variable_declarations, unreachable_from_main
32+
const String? mapId = null;
33+
2734
void main() {
2835
runApp(const MaterialApp(
2936
home: MapsDemo(<GoogleMapExampleAppPage>[
@@ -33,7 +40,9 @@ void main() {
3340
AnimateCameraPage(),
3441
MoveCameraPage(),
3542
PlaceMarkerPage(),
43+
PlaceAdvancedMarkerPage(mapId: mapId),
3644
MarkerIconsPage(),
45+
AdvancedMarkerIconsPage(mapId: mapId),
3746
ScrollingMapPage(),
3847
PlacePolylinePage(),
3948
PlacePolygonPage(),
@@ -44,6 +53,7 @@ void main() {
4453
TileOverlayPage(),
4554
GroundOverlayPage(),
4655
ClusteringPage(),
56+
AdvancedMarkersClusteringPage(mapId: mapId),
4757
MapIdPage(),
4858
])));
4959
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
3+
4+
import 'marker_icons.dart';
5+
import 'page.dart';
6+
7+
/// Page that demonstrates how to use custom [AdvanceMarker] icons
8+
class AdvancedMarkerIconsPage extends GoogleMapExampleAppPage {
9+
/// Default constructor
10+
const AdvancedMarkerIconsPage({Key? key, required this.mapId})
11+
: super(
12+
key: key,
13+
const Icon(Icons.image_outlined),
14+
'Advanced marker icons',
15+
);
16+
17+
/// Map Id to use for the GoogleMap
18+
final String? mapId;
19+
20+
@override
21+
Widget build(BuildContext context) {
22+
return _AdvancedMarkerIconsBody(mapId);
23+
}
24+
}
25+
26+
class _AdvancedMarkerIconsBody extends MarkerIconsBody {
27+
const _AdvancedMarkerIconsBody(this.providedMapId);
28+
29+
final String? providedMapId;
30+
31+
@override
32+
String? get mapId => providedMapId;
33+
34+
@override
35+
Marker createMarker(
36+
MarkerId markerId,
37+
LatLng position,
38+
BitmapDescriptor icon,
39+
) {
40+
return AdvancedMarker(
41+
markerId: markerId,
42+
position: position,
43+
icon: icon,
44+
);
45+
}
46+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
3+
4+
import 'clustering.dart';
5+
import 'page.dart';
6+
7+
/// Page for demonstrating advanced marker clustering support.
8+
/// Same as [ClusteringPage] but works with [AdvancedMarker].
9+
class AdvancedMarkersClusteringPage extends GoogleMapExampleAppPage {
10+
/// Default constructor.
11+
const AdvancedMarkersClusteringPage({Key? key, required this.mapId})
12+
: super(
13+
key: key,
14+
const Icon(Icons.place_outlined),
15+
'Manage clusters of advanced markers',
16+
);
17+
18+
/// Map Id to use for the GoogleMap
19+
final String? mapId;
20+
21+
@override
22+
Widget build(BuildContext context) {
23+
return _AdvancedMarkerClusteringBody(providedMapId: mapId);
24+
}
25+
}
26+
27+
/// Same as [ClusteringBody] but works with [AdvancedMarker].
28+
class _AdvancedMarkerClusteringBody extends ClusteringBody {
29+
const _AdvancedMarkerClusteringBody({required this.providedMapId});
30+
31+
final String? providedMapId;
32+
33+
/// Return the mapId to use for the GoogleMap
34+
@override
35+
String? get mapId => providedMapId;
36+
37+
@override
38+
Marker createMarker({
39+
required MarkerId markerId,
40+
required ClusterManagerId clusterManagerId,
41+
required LatLng position,
42+
required InfoWindow infoWindow,
43+
required VoidCallback onTap,
44+
}) {
45+
return AdvancedMarker(
46+
markerId: markerId,
47+
clusterManagerId: clusterManagerId,
48+
position: position,
49+
infoWindow: infoWindow,
50+
onTap: onTap,
51+
icon: BitmapDescriptor.pinConfig(
52+
backgroundColor: Colors.white,
53+
borderColor: Colors.blue,
54+
glyph: Glyph.color(Colors.blue),
55+
),
56+
);
57+
}
58+
59+
@override
60+
Marker getSelectedMarker(Marker marker, bool isSelected) {
61+
assert(marker is AdvancedMarker);
62+
return (marker as AdvancedMarker).copyWith(
63+
iconParam: isSelected
64+
? BitmapDescriptor.pinConfig(
65+
backgroundColor: Colors.blue,
66+
borderColor: Colors.white,
67+
glyph: Glyph.color(Colors.white),
68+
)
69+
: BitmapDescriptor.pinConfig(
70+
backgroundColor: Colors.white,
71+
borderColor: Colors.blue,
72+
glyph: Glyph.color(Colors.blue),
73+
),
74+
);
75+
}
76+
}

packages/google_maps_flutter/google_maps_flutter_ios/example/shared/maps_example_dart/lib/clustering.dart

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,35 @@ class ClusteringBody extends StatefulWidget {
2929

3030
@override
3131
State<StatefulWidget> createState() => ClusteringBodyState();
32+
33+
/// Map Id to use for the GoogleMap
34+
String? get mapId => null;
35+
36+
/// Create a marker that is later added to a cluster
37+
Marker createMarker({
38+
required MarkerId markerId,
39+
required ClusterManagerId clusterManagerId,
40+
required LatLng position,
41+
required InfoWindow infoWindow,
42+
required VoidCallback onTap,
43+
}) {
44+
return Marker(
45+
markerId: markerId,
46+
clusterManagerId: clusterManagerId,
47+
position: position,
48+
infoWindow: infoWindow,
49+
onTap: onTap,
50+
);
51+
}
52+
53+
/// Return selected or unselected state of the given [marker]
54+
Marker getSelectedMarker(Marker marker, bool isSelected) {
55+
return marker.copyWith(
56+
iconParam: isSelected
57+
? BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen)
58+
: BitmapDescriptor.defaultMarker,
59+
);
60+
}
3261
}
3362

3463
/// State of the clustering page.
@@ -95,16 +124,12 @@ class ClusteringBodyState extends State<ClusteringBody> {
95124
setState(() {
96125
final MarkerId? previousMarkerId = selectedMarker;
97126
if (previousMarkerId != null && markers.containsKey(previousMarkerId)) {
98-
final Marker resetOld = markers[previousMarkerId]!
99-
.copyWith(iconParam: BitmapDescriptor.defaultMarker);
127+
final Marker resetOld =
128+
widget.getSelectedMarker(markers[previousMarkerId]!, false);
100129
markers[previousMarkerId] = resetOld;
101130
}
102131
selectedMarker = markerId;
103-
final Marker newMarker = tappedMarker.copyWith(
104-
iconParam: BitmapDescriptor.defaultMarkerWithHue(
105-
BitmapDescriptor.hueGreen,
106-
),
107-
);
132+
final Marker newMarker = widget.getSelectedMarker(tappedMarker, true);
108133
markers[markerId] = newMarker;
109134
});
110135
}
@@ -159,7 +184,7 @@ class ClusteringBodyState extends State<ClusteringBody> {
159184
final double clusterManagerLongitudeOffset =
160185
clusterManagerIndex * _clusterManagerLongitudeOffset;
161186

162-
final Marker marker = Marker(
187+
final Marker marker = widget.createMarker(
163188
clusterManagerId: clusterManager.clusterManagerId,
164189
markerId: markerId,
165190
position: LatLng(
@@ -208,6 +233,9 @@ class ClusteringBodyState extends State<ClusteringBody> {
208233
SizedBox(
209234
height: 300.0,
210235
child: ExampleGoogleMap(
236+
mapId: widget.mapId,
237+
markerType:
238+
widget.mapId != null ? MarkerType.advanced : MarkerType.legacy,
211239
onMapCreated: _onMapCreated,
212240
initialCameraPosition: const CameraPosition(
213241
target: LatLng(-33.852, 151.25),

packages/google_maps_flutter/google_maps_flutter_ios/example/shared/maps_example_dart/lib/marker_icons.dart

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,22 @@ class MarkerIconsBody extends StatefulWidget {
3030

3131
@override
3232
State<StatefulWidget> createState() => MarkerIconsBodyState();
33+
34+
/// Return the mapId to use for the GoogleMap
35+
String? get mapId => null;
36+
37+
/// Create a marker to be displayed on the map
38+
Marker createMarker(
39+
MarkerId markerId,
40+
LatLng position,
41+
BitmapDescriptor icon,
42+
) {
43+
return Marker(
44+
markerId: markerId,
45+
position: position,
46+
icon: icon,
47+
);
48+
}
3349
}
3450

3551
const LatLng _kMapCenter = LatLng(52.4478, -3.5402);
@@ -69,6 +85,10 @@ class MarkerIconsBodyState extends State<MarkerIconsBody> {
6985
width: 350.0,
7086
height: 300.0,
7187
child: ExampleGoogleMap(
88+
mapId: widget.mapId,
89+
markerType: widget.mapId != null
90+
? MarkerType.advanced
91+
: MarkerType.legacy,
7292
initialCameraPosition: const CameraPosition(
7393
target: _kMapCenter,
7494
zoom: 7.0,

0 commit comments

Comments
 (0)