Git Product home page Git Product logo

flutter-google-map-cases's Introduction

Google Map Module

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)  
- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)  

For help getting started with Flutter development, view the
online documentation, which offers tutorials,
samples, guidance on mobile development, and a full API reference.

Softwares and Version Install Flutter (3.10.1) :

https://docs.flutter.dev/get-started/install
Install Android Studio : Android Studio Dolphin | 2021.3.1 Patch 1

https://developer.android.com/studio/install
Xcode (14.2) Install :

https://apps.apple.com/us/app/xcode/id497799835?mt=12

Features :

  • Select and search location with marker at location
  • Drag marker to get address of that location
  • Multiple and custom markers at map
  • Route draw between two points
  • Cluster on google map

Clone Project :

git clone https://github.com/TechnourceDeveloper/Flutter-Google-Map-Cases.git

Steps after project clone successfully.

  1. Enable dart support to the current project.
  2. If configuration not set then in android studio go to add configuration and add path of main.dart
  3. Go to pubspec.yaml file or into terminal of project path run command: flutter pub get
  4. After these steps run project.

About Project files:

State Management Pattern used Getx Pattern (get: ^4.6.5)

https://pub.dev/packages/get
All global and constants are declared in global folder

PUT YOUR GOOGLE PLACES API KEY HERE TO MAKE IT WORK path: lib/global/utils/config.dart kGoogleApiKey is defined in config file.

class Config {
static var appName = "Google Map Module";
static var kGoogleApiKey = 'PUT_YOUR_API_KEY_HERE';

lib/global/utils/config.dart

This app contains 4 buttons.

1. Search Location

  • Search location Google Map will load, and the user's current location and address will be displayed in Google Map.
  • Users can also drag marker to get a particular place's address.
  • Users can search for any place by using the autocomplete search box, and a marker will move to that location.

Used Plugins:

  1. geolocator - https://pub.dev/packages/geolocator
  2. geocoding - https://pub.dev/packages/geocoding
  • To get autocomplete place search box we use Google Places API.

Screenshots:

1 2 3 4 5

2. Multiple Custom Marker

  • On click of multiple marker users will find places like restaurants, hospitals, banks, etc. marked.
  • Users can also select a custom marker and replace it with the default marker.

Used Plugins:

Screenshots:

6 7

3. Route Draw

  • On click of route draw Users current location will be display in google map.
  • A user can search for his destination and see the route from his sources to the destination.

Used Plugins:

Screenshots:

8 9

4. Cluster

  • On click of cluster The number on a cluster indicates how many markers it contains. As you zoom into any of the cluster locations, the number on the cluster decreases, and you begin to see the individual markers on the map. Zooming out of the map consolidates the markers into clusters again.

Used Plugins:

Screenshots:

10

License

MIT

flutter-google-map-cases's People

Contributors

technourcedeveloper avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.