Giter Club home page Giter Club logo

map_picker_flutter's Introduction

Map Picker Flutter

Check it out at Pub.Dev

This works on:

  • Android;
  • iOS;
  • Web;
  • Windows;
  • Linux;
  • MacOS;

Screenshot_354

Help Maintenance

I've been maintaining quite many repos these days and burning out slowly. If you could help me cheer up, buying me a cup of coffee will make my life really happy and get much energy out of it.

Buy Me A Coffee

Objective

This lib was designed especially for web and desktop platforms, but of course you can also use it on mobiles.

Getting Started

To use is simple, before all, you need to call this method, It will required once only,

MapPicker.init(
        /// Custom search Builder Widget, case it is null, will be used the default of packer
        searchBuilder: (Function(String address) search) => MyCustomWidget(),

        /// Custom address Builder Widget, case it is null, will be used the default of packer
        addressBuilder: (String address, Function done) => MyCustomWidget(),

        /// Custom progress Widget, case it is null, will be used the default of packer
        progressWidget: MyCustomWidget(),

        /// Custom address Builder Widget, case it is null, will be used the default of packer
        marker: MyCustomWidget(),

        /// All above is to set global widgets to all times you need call this package

        theme: MPickerTheme(
            /// # Initial Location
            initialLocation: LatLng(-23.572143, -46.613275),

            /// # Text showed when address is not founded
            errorAddressMissing: 'Error, address don\'t founded.',

            /// # Text showed when gets error during find address
            errorToFindAddress: 'Error to find this address, try again.',

            /// # Initial text when don`t has any address selected
            withoutAddress: 'Without Address Picked',

            /// # Here the texts showed in [TextField] case you don`t use a custom
            searchHint: 'Type here...',
            searchLabel: 'Search:',

            /// # Language of return of google maps api
            lang: 'en'),

        /// My Google Maps Api Key
        key: 'GOOGLE_API_KEY');

Then Usage

Now you can use of two ways

Mobiles

You just call navigator and wait to response, ex:

final MPAddress address = await Navigator.push(context, MaterialPageRoute(builder: (c) => MapPicker(
    /// here, case you want overwrite anything of global params of you set, you can

    /// # Custom search Builder Widget, case it is null, will be used the global or default
    searchBuilder: (Function(String address) search) => MyCustomWidget(),

    /// # Custom address Builder Widget, case it is null, will be used the global or default
    addressBuilder: (String address, Function done) => MyCustomWidget(),

    /// # Custom progress Widget, case it is null, will be used the global or default
    progressWidget: MyCustomWidget(),

    /// # Custom theme, case it is null, will be used the global or default
    theme: MPickerTheme(...),

    /// # Custom Marker, case it is null, will be used the global or default
    marker: MyWidget()
)));

Web / Desktop

In this platforms, because screens is bigger, I think is more intelligent use a dialog, then I made it ready for you to use

final MPAddress address = await MapPickerTemplate.dialogAddressPicker(
    context: context);

Of course, you can use both ways on any platform, this is just a suggestion.

map_picker_flutter's People

Contributors

bestfastfire avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

map_picker_flutter's Issues

Map not loading on a flutter web app which loaded from a secure (HTTPS) connection due Mixed Content blocking in Chrome

The web app does not show map when the method MapPickerTemplate.dialogAddressPicker(context: context) is called, but instead show circular progress indicators. When checking the web the console, The request for map images were blocked due to mixed content because the website was loaded from a secure (HTTPS) connection and the call made for map images was through unsecure (HTTP) connection. Upon checking the plugins files I came across this url 'http://mt1.google.com/vt/lyrs=m@129&x=$x&y=$y&z=$z';,
in the

map_picker.dart

This url is actually causing the issue. And it is a simple fix, the above mentioned url just have to be converted to a secure link exactly like this one 'https://mt1.google.com/vt/lyrs=m@129&x=$x&y=$y&z=$z';

Please try to fix and update the plugin as soon as possible. Thank you

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.