google_map_fade_markers

Description:

google map fade markers

Google Map Fade Markers #
This package This package integrate for the markers a fade animation when the markers changes
Installation #

Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
google_map_fade_markers:^0.0.3
copied to clipboard

Prepare for your platform:

Android #

Set the minSdkVersion in android/app/build.gradle:

android {
defaultConfig {
minSdkVersion 20
}
}
copied to clipboard
This means that app will only be available for users that run Android SDK 20 or higher.

Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:

<manifest ...
<application ...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>
copied to clipboard
iOS #
To set up, specify your API key in the application delegate ios/Runner/AppDelegate.m:
#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GMSServices provideAPIKey:@"YOUR KEY HERE"];
[GeneratedPluginRegistrant registerWithRegistry:self];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
copied to clipboard
Or in your swift code, specify your API key in the application delegate ios/Runner/AppDelegate.swift:
import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GMSServices.provideAPIKey("YOUR KEY HERE")
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
copied to clipboard
Web #
You'll need to modify the web/index.html file of your Flutter Web application
to include the Google Maps JS SDK.
Check the google_maps_flutter_web README
for the latest information on how to prepare your App to use Google Maps on the
web.

Import the package and use it in your Flutter App.

import 'package:google_map_fade_markers/google_map_fade_markers.dart';
copied to clipboard
Example #
import 'package:flutter/material.dart';
import 'package:google_map_fade_markers/google_map_fade_markers.dart';

void main() {
runApp(const MainApp());
}

class MainApp extends StatefulWidget {
const MainApp({super.key});

@override
State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
final Set<Marker> markers = {
const Marker(
markerId: MarkerId("1"), position: LatLng(40.463669, -4.749220)),
const Marker(
markerId: MarkerId("2"), position: LatLng(39.463669, -4.749220)),
};

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: GoogleMapFadeMarkers(
initialCameraPosition: const CameraPosition(
target: LatLng(40.463669, -3.749220),
),
markers: markers,
onTap: (argument) {
markers
..clear()
..addAll(changeMarkers());
setState(() {});
},
)),
);
}

Set<Marker> changeMarkers() => {
const Marker(
markerId: MarkerId("3"), position: LatLng(37.463669, -4.749220)),
const Marker(
markerId: MarkerId("4"), position: LatLng(34.463669, -4.749220)),
};
}

copied to clipboard