Inline Google Maps support about flutter HOT 171 CLOSED

Just so you aren't left hanging, we are aware that this is very important and we are working on it.

from flutter.

This is being worked on now, and progress is being made.

from flutter.

As a developer i really want to use the native Google Maps component to render inside my flutter app. I just created a flutter app and this is kind of a blocker. The only solution is to build it in Java/Android and open it when clicking a flutter button.

Ideally I would like a 'NativeView' in flutter, which renders a native widget inside flutter.
This is probably quite difficult because you have merge rendering / events into the flutter rendering engine.

It also goes against the flutter 'one widget for both platforms'. However, sometimes complex widgets (like a map) are really something you want to reuse.

from flutter.

We consider this to be a high priority and are working on it. It is going to take a while as it is a quite complicated problem to solve properly. We apologise for the delay and ask for your patience.

from flutter.

For GoogleMaps:

We are actively working on it. Landing our solution is still a few weeks away. In the meantime you may want to use AppTree's plugin. While that plugin offers only full-screen interactive maps and inline static ones, it might be enough for you to get a prototype up and running.

It should be noted that GoogleMaps on Android is not currently open to integration into custom, OpenGL compositing like the Flutter engine does. So while we will be able to deliver interactive, inline maps also on Android, they will be restricted for now so that they are either top-most on the z axis or non-interactive.

In other words, it will take some time before Flutter is able to draw a button on top of an interactive map on Android. You can still draw such buttons with custom Java/Kotlin code of course. We are working with the maps team to resolve that issue too, but it will take some time, as an API addition seems necessary.

from flutter.

Any sneak peek? 😃

from flutter.

As many here I am fairly new to Flutter and the lack of Google Maps support is a no go for my app to be migrated to Flutter.

That being said, please don't take me wrong, I understand the struggle on what I am about to suggest, but I believe Flutter should implement a Google Maps Widget made from the ground up, in Dart, with all the Google Maps APIs to support its power, just like the Android one is.

Maps are supposed to be fast and interactive, we expect to be able to draw paths on the maps, add custom pins and etc. Also, we want to programmatically get places search autocomplete, reverse-geocoding, geocoding, Longitude and Latitude distance calculations support.

Trying to use the Native Map on the device will probably be too limited for a full mobile experience, so my suggestion (as hard as it is) is to focus on a full Google Maps Widget + Google Maps API for Flutter/Dart and do it properly, even if it takes more time to deliver.

from flutter.

We haven't begun work specifically on maps, but we have begun studying inline video and we believe that this should pave the way for this work. We cannot give an ETA at this time.

from flutter.

from flutter.

from flutter.

I don't see in this doc descriptions of how to integrate native widget (like Maps) into your flutter apps. Have I missed something ?

from flutter.

@ezrasandzerbell We've been delayed in this work which is going to happen in the context of the google_mobile_maps plugin repo. I expect activity to pick up very shortly.

Our initial (limited) solution will be to use native map views as overlays, later to be replaced by texture streaming from the native map views, once the GoogleMap APIs support that. The main point of the plugin until that happens is to support the development of the Dart API for controlling maps. This includes the ability to place markers etc.

from flutter.

@wmleler Please let me know if we have updates on this. We would love to start using Flutter but this is sort of a roadblock for us at the moment.

We are looking to build a location based service like Uber!

from flutter.

Hello ! I would love to know the roadmap of this feature, or even if one even exists. I have two mobile apps in the works and both rely heavily on a map. I love Dart, and I'm looking for an excuse to try Flutter.

The solution with FlutterView looks overly complicated, from the point of view of a rookie who has never written a single line of Flutter. The other solutions do not suit my need, I need a fully interactive map.

I don't know how hairy that is to implement in Flutter, nor if you even plan to implement it someday. Any info would be appreciated. I guess the resolution of this issue will be my signal to start development with Flutter.

from flutter.

I am working on an open-source map widget for Flutter written in pure Dart in this Github repository and Pub.

Any contributions to the project are welcome.

from flutter.

@mravn-google do you have an estimate for when this new flutter map feature will roll out? Also, when you say that it will not be possible to draw on top of the map, does that include simple functionality like pin dropping / address display?

from flutter.

I created a solution that works in Android and iOS and I made a video showing the result.
It is using Google Static Maps and I implemented the zoom in / zoom out features and added a pin in the user location, but it is possible to implement other features, like moving north/south/east/west and add a bunch of pins.
To make it more efficient, I stacked 3 maps - the one that you see, one with +1 level of zoom and one with -1 level of zoom. Because Flutter is awesome in caching images, when you press + or -, it will get the cached image, so it will pretty fast.

            new Stack(
              children: <Widget>[
                new Center(
                  child: new CircularProgressIndicator(),
                ),
                //Zoom in Map Image for caching
                new Image.network(
                  mapUrl.zoomInMapUrl,
                  fit: BoxFit.contain,
                ),
                //Zoom out Map Image for caching
                new Image.network(
                  mapUrl.zoomOutMapUrl,
                  fit: BoxFit.contain,
                ),
                //Map Image
                new Image.network(
                  mapUrl.mapUrl,
                  fit: BoxFit.contain,
                  gaplessPlayback: true,
                ),
                new Positioned(
                  bottom: 16.0,
                  right: 16.0,
                  child: new Column(
                    children: <Widget>[
                      //Zoom in
                      new Container(
                        color: Colors.black54,
                        child: new IconButton(
                          icon: new Icon(Icons.add),
                          color: Colors.white,
                          onPressed: () => zoomInMap(true),
                        ),
                      ),
                      new Divider(),
                      //Zoom out
                      new Container(
                        color: Colors.black54,
                        child: new IconButton(
                          icon: new Icon(Icons.remove),
                          color: Colors.white,
                          onPressed: () => zoomInMap(false),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),

Even though I am not making available the source code right now, the implementation is pretty much straight forward.
Don't forget to read the video description.

https://www.youtube.com/watch?v=PR2MdUiepyw

from flutter.

I think this issue is a pretty big blocker for a lot of people that are willing to migrate their business in the future.

Yes. We've gotten that feedback consistently. It's just a question of what implementation approach we want to take and when to schedule the work.

from flutter.

@EasonPai iOS is not supported by the plugin yet. We'll add that in the coming weeks.

from flutter.

I think for now, if you need these advanced widgets, flutter is a no go area.
Whenever you start a project in flutter, you must understand that some designs that your designers come up with are not easy to implement.

The best workaround is a google static map, with a link to a fullscreen map component. Since a lot of apps are doing this now, it gives you a solution to build a flutter app with native like experience.

In the long term, i hope flutter has its own native gmaps widget. But before that happens flutter must be announced oficially by Google, and supporting it. Its unclear what the future of flutter now.

from flutter.

@slightfoot The idea of a FlutterNativeHostView sounds interesting, though I am not sure how that would work technically on Android. Do you have a concrete approach in mind concerning how to "stub out the child rendering process"?

On iOS, we are currently working on a solution that integrates CALayers into the way the Flutter Engine does compositing. That should allow us to consume any UIView.

from flutter.

Just gonna leave this here. If your needs of map usage are limited to asking the user for an address I implemented a plugin that handles everything, from location permission handling to reverse geocoding. https://pub.dartlang.org/packages/location_picker

from flutter.

@mit-mit any timeline or expected release date on that long term? I have a project coming in and I would like to make it in Flutter, but without Google maps support I will have to go native.(Java/Swift).

from flutter.

Is there any chance maps will be implemented in 2017? I love Dart and would like very much to use Flutter, but I really need non-static maps, like showing points of interest nearby and showing the description upon the click on the point.

from flutter.

First of all I (fulltime Android dev) love flutter and the progress that is made the last months is impressive. That said, I think this issue is a pretty big blocker for a lot of people that are willing to migrate their business in the future.

I'm currently doing a case study for the company i am working for and if a NativeView (per tjerkw's suggestion) feature exists we could use that to properly bridge the gap between the different platforms!

from flutter.

native plugins that draw to a SurfaceTexture that can be used in flutter through a Texture component (probably the open source mapbox sdk’s can be used as a basis for this).

@rbellens are there any changes you can recommend for https://github.com/apptreesoftware/flutter_map ? It sounds like there's an opportunity to improve the performance

from flutter.

Do you have a release date for this feature?

I might need to go back to React Native for a client project otherwise :(

from flutter.

flutter_map is good substitute but it also significantly worse than native map views. It is using tiles instead of vector maps and doesn't support Google Maps let alone Apple Maps. I am personally waiting for streaming native view contents into flutter hierarchy as it will allow to close a lot more gaps than this one (e.g. WebViews, other SDKs) as referenced here: #730 (comment)

from flutter.

from flutter.

I too would like to be able to use maps in Flutter, but there is a simple case that might be a workaround. If I could have a full screen native map being displayed, and have a semi-transparent Flutter layer above it, and some easy way to communicate between the native map layer and the Flutter app (e.g., to tell when the map moves, its center lat/lng, zoom level, etc.) that would work for quite a few applications that require maps. In other words, no inline maps embedded in a Flutter view.

It would be even better if this is generalized so that a flutter layer can be composited on top of any Android layer -- not just maps, but 3D views (including VR), or video, etc.

from flutter.

This might be a good option for those looking for a full-screen map solution:

https://pub.dartlang.org/packages/map_view

The solution we chose was to use a google static map that can be tapped to open a full screen view

from flutter.

My comment was not meant to make any such statement. The long-term goal is to provide a Flutter widget that has similar API capabilities to what Google Maps has on in it's Android and iOS APIs.

The term 'inline' we use here, is to capture the goal that the Flutter Google Map is a Flutter widget; something that you can place 'inline' among other Flutter widgets (next to, stack below, stack above, etc.).

from flutter.

@mit-mit Indeed, some long-term release date would be really useful. The whole idea of flutter looks amazing. Unfortunately without Maps I hardly see starting a project on a Flutter

from flutter.

Found this plugin from @FaisalAbid : https://github.com/FaisalAbid/flutter-google-maps

from flutter.

@tjerkw I do agree that it's still in alpha, so we can't expect every functionality from more mature frameworks yet. But hasn't Flutter been announced by Google yet? They even showed it at IO

from flutter.

@wmleler Our apps usually look like this. We have tabs, on the first tab is a google map. On the second is a listview. I am able to click on any pin on the map and then I see something like "partial" detail/info of that item from which I can launch navigation from the current position to that item (selected pin). This partial detail overlays the map.

from flutter.

I am fairly new to the Flutter eco-system, but if I understand how it works correctly; Skia is using OpenGL to do its rendering. You might look at Google GVRKit on how they are doing it. GVRUIRenderer can take a normal UI element and put it into the OpenGL scene.

from flutter.

@ezrasandzerbell The plugin work will come with both documentation and examples. Please file issues on this (flutter/flutter) repo for feature requests on the plugin.

from flutter.

Is there any updates about this?

from flutter.

@jposuna It got renamed. See flutter/plugins#518

from flutter.

@bjornbjorn Full API coverage is on the roadmap where meaningful. Prioritization is very much informed by user feedback. So please create an issue with your feature requests. Then other people can upvote them and/or feel motivated to submit PRs ... and/or we'll get to work on it asap.

To be clear, my comment here is about the google_maps_flutter plugin. If your question is about the map_view package, please direct it to the AppTree team.

from flutter.

But as Flutter focuses on cross platform development, it should have a plugin for both platforms

Agreed, but our ecosystem is only now booting up. We hope by sharing existing plugins we find, we can get more contributors to help author more features and functionality.

from flutter.

Yep, actually it is the .mm file: https://github.com/googlevr/gvr-ios-sdk/blob/master/Samples/GVRKit/GVRUIViewRenderer.mm -- I'm using it currently to display a whole UIView based scene in my GVRKit project.

from flutter.

@mravn-google Thanks for the new feature details. I noticed that the google_mobile_maps plugin doesn't have a public issues tab, so I am following up here. We would greatly appreciate documentation with code samples when these new features roll out.

I am personally interested in:

1. How to constrain a google map to specific width and heights. The solutions that I've seen so far (AppTree, MapView) both seemed to be full screen views only. Documentation is sparse for correct implementation and common use cases.

2. How to hook up a search tool like Google Places Autocomplete (https://pub.dartlang.org/packages/flutter_google_places_autocomplete) so that users can type in a location, autocomplete their data, submit, and see that position rendered on a map.

from flutter.

Comment by eseidelGoogle
Wednesday Aug 05, 2015 at 19:35 GMT

We might need this for the Fitness app, depending.

from flutter.

This is presumably going to be a "third-party" component, right?

from flutter.

We'll almost certainly want to use some non-Dart SDK to provide Maps support, so yes.

from flutter.

We expect developers will use Maps by using a "native" iOS or Android maps view, per:
https://docs.google.com/document/d/1DOfwpL6VojCAG_zjjcA_z5ekF7rTIohV8dWn2o7_IME/edit

from flutter.

Sorry, I may have been a bit overzealous in my linking. Said doc is pre-work for Flutter to participate as a normal View inside Obj-C/Java applications. The path to add other Obj-C/Java code to them is not yet documented, no.

from flutter.

Any updates on this?

from flutter.

Is there any progress on this? I've got two apps sketched that require maps and would like to make them my first Flutter app in the stores. So is this going to come out within the next few months or are we talking next year? :)

from flutter.

@sethladd It's a great first step. But as Flutter focuses on cross platform development, it should have a plugin for both platforms. But I'm sure tons of new plugins will come when inline views are available.

from flutter.

@gabrielsallesrg I didn't even know Google Maps provided functionality for that. This is for sure a good solution for now. Thanks for sharing this!

from flutter.

@bramvbilsen Just to avoid confusion, Google Static Maps does not provide zoom in / zoom out functionality. What really happens is that when you click the +/- button, it requests a new image.

from flutter.

Got it. Thanks :)

from flutter.

@tjerkw Very clear explanation for Gmaps.

I have already work with VTM (vector-tile map) library for Android (opensciencemap/openstreetmap). Is there a library adapted to flutter to manage an open-source map ?

from flutter.

@tjerkw can you share the code base please

from flutter.

Is there any update on the Google maps integration with flutter?

from flutter.

How do I add native maps in each platform and render the map?

from flutter.

@TitikshaDaga Inline Google Map is not yet supported.

You can show native Activity/ViewController with Google Map by plugin mechanism.

from flutter.

FaisalAbid/flutter-google-maps#1
Can any1 resolve this??

from flutter.

You can show native Activity/ViewController with Google Map by plugin mechanism.

@najeira do you have sample code/pseudocode for this? Does that involve using a FlutterView?

from flutter.

@timotheecour image_picker and flutter_webview_plugin are good example for using native Activity/ViewController.

from flutter.

@mehmetf explained to me today that customer: mulligan does need maps, but believes they can solve their use cases with static map images for now, hence the customer tagging.

from flutter.

Any news on this? This is a show stopper for geographic applications.

from flutter.

This is being worked on now, and progress is being made.

@wmleler I'd love to see a working map...

from flutter.

@theobouwman Right now, this is the best solution -- https://pub.dartlang.org/packages/map_view

If you want to have a map act like it is part of a Flutter widget, you can insert a map as an image (using the static maps API -- https://developers.google.com/maps/documentation/static-maps/ ). When the user clicks on this static map image, open up a full page map, along with a widget to close this. After the user closes the full page map, replace the map image with an updated static map (showing changes in map zoom and scroll, any added markets, etc.)

from flutter.

@wmleler I think @theobouwman more meant he was looking forward to seeing the "native widget" integration. I'm excitedly waiting as well^^

from flutter.

@mclark4386 that's right.

from flutter.

I would love to hear your use cases for what you call "native widget" integration. I've built quite a few apps using maps, and to me it is sufficient to have the ability to overlay flutter widgets on top of a full page map, and to have a static map embedded in a Flutter widget that opens up to a full page map. I'm not saying we shouldn't provide native widget integration, I'm just curious why people want it and I want to understand.

from flutter.

@wmleler There are a lot of use cases! For example an interactive map with restaurants nearby. You'd want to use an inline map with some custom layout on top of it to make your app look unique.

from flutter.

from flutter.

from flutter.

I do have also location based project. Can' wait :(

from flutter.

@wmleler we are looking to port an application with a split Android/iOS code base over to Flutter. But the main feature uses Google Maps to display pins. So we are really waiting on this feature.

I was thinking about implementation and wondering if this could be done similar to the video support. Something along the lines of a FlutterNativeHostView which hosts the platform view and stubs out the child rendering process to a texture supplied by the Flutter framework. This could then be displayed like the video player in the Flutter view hierarchy. [Touch] Input would have to be passed over a method call to the plugin, but it would be doable.

Frankly the better way.. and the only other other way I can see it implemented, would be to rewrite/redeploy the Google Maps library in Dart. I would suppose this would take more time.

@wmleler I'd love to hear your thoughts on something like the host view. Perhaps this is a good direction for Flutter so that more libraries can be ported over by wrapping their current components in a Plugin.

from flutter.

You can show native Google Maps View over FlutterView.

The AdMob plugin is doing something similar:
https://github.com/flutter/plugins/blob/master/packages/firebase_admob/android/src/main/java/io/flutter/plugins/firebaseadmob/MobileAd.java#L242

from flutter.

@NathanaelA Thanks for the tip! Are you referring to https://github.com/googlevr/gvr-ios-sdk/blob/master/Samples/GVRKit/GVRUIViewRenderer.h?

/cc @sigurdm

from flutter.

Any updates on this Feature?, have a client on the doorstep wanting a geolocated app like uber. and this feature would be really necessary.

Thanks!!!

from flutter.

from flutter.

@mravn-google This is great news

from flutter.

@NathanaelA
That's really interesting.
I was wondering the same thing for VR and AR. Getting a flutter view to composite with output from other renderers is the gist from what I can see ?
I was looking at exactly same issue with flutter for desktop ! I have flutter window but also a view from a 3d opengl rendering system.

from flutter.

I tried to call the full screen places picker dialog from android, but it only shows for a second then it gets an onResume from the main flutter thread and draws over the top of it. From what I have read elsewhere this should actually work. What am I doing wrong? :)

Thanks!

 ```
    call.method == "showPlacesPicker" -> {
            val code = GoogleApiAvailability.getInstance().isGooglePlayServicesAvailable(activity)
            if (GoogleApiAvailability.getInstance().showErrorDialogFragment(activity, code, REQUEST_GOOGLE_PLAY_SERVICES)) {
                return
            }

            //val intent = Intent(activity, PlacesActivity::class.java)
            //activity.startActivity(intent)

            var intentBuilder = PlacePicker.IntentBuilder()
            activity.startActivityForResult(intentBuilder.build(activity), PLACE_PICKER_REQUEST)

            placeResult = result
            return
        }

from flutter.

@pinkfish I think you could call back from flutter perhaps and set the height of your native view as needed. It's all kinda tricky

from flutter.

@mravn-google I have issue when trying google_mobile_maps. I can run google_mobile_maps example on android (by replacing GOOGLE_MAPS_API_KEY in gradle.properties to my own key).

But for iOS, when I run example I get errors:

Syncing files to device iPhone SE...
[VERBOSE-2:dart_error.cc(16)] Unhandled exception:
	MissingPluginException(No implementation found for method init on channel plugins.flutter.io/google_mobile_maps)
	#0      MethodChannel.invokeMethod (package:flutter/src/services/platform_channel.dart:153:7)
	<asynchronous suspension>
	#1      _channel (package:google_mobile_maps/google_mobile_maps.dart:16:9)
	#2      _channel (package:google_mobile_maps/google_mobile_maps.dart:14:21)
	#3      _GoogleMapsPlatformOverlay.create (package:google_mobile_maps/google_mobile_maps.dart:94:25)
	#4      PlatformOverlayController.attachTo.<anonymous closure> (package:google_mobile_maps/platform_overlay.dart:72:21)
	#5      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
	#6      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:938:9)
	#7      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:751:7)
	#8      Timer._createTimer.<anonymous closure> (dart:async/runtime/libtimer_patch.dart:21:15)
	#9      _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19)
	#10     _Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5)
...

Besides, I have almost zero knowledge on iOS development, no idea where to assign the GOOGLE_MAPS_API_KEY to.

====
UPDATED 2018.04.14: Sorry I am getting too exciting, I didn't read previous article well to know that iOS support is not yet ready.

from flutter.

@ocolot Same here. I've got to start a map-based project shortly and really wanted to use flutter but because of this map situation, I'm going back to RN.

from flutter.

@brooth, I am struggling to make maps work in RN. If you have a perfect example, please post it. Now I am on the verge of RN or Flutter. The only reason is the bug free easy to use maps. If I get maps working in RN then I would use RN.

from flutter.

hello alegsm, I'm very interested about your plugin but I don't understand the example... I'm newbi I just want to set longitude and latitude and visualise geolocalisation. Did anyone succeed?
does anyone have a simple example? thanks evrybody

from flutter.

@nitneuq33 yes you can do it with location_picker. It is intended to work as a prompt for things like asking the user to input a delivery address. You can look at the example project inside the repo. ill leave you a link
https://github.com/touwolf/location_picker/tree/master/example

from flutter.

sorry alegsm , I tried to use the example and try to set (double initialLat; and double initialLong; ) but nothing. I think I'm too noob ^^ I don't understand how to set my lat variable and longitude variable into your example to visualise a map. any simple example or easy explication
will be welcome :)

from flutter.

What's wrong with flutter_map?

from flutter.

Move on marker press not working iOS
Inconsistent Polygon Rendering
Marker offset not working in Android
(one user) works on android not on IOS
Z index doesn't work on iOS
Marker rotation doesn't work on iOS
Urltemplate not changing iOS
Animated callout problem in iOS
Marker onSelect doesn't work on Android
Android onclick not accurate
Image in custom callout not working Android

I dumped React Native and came back to Flutter because of how awful its map experience was for me, and I didn't care at all about things working on one platform and not on another. I think everyone's experience would be much better if we just added vector maps support to flutter_map (I don't know if gmap/apple map integration is doable?), for the same reasons that xster wrote about in Why Flutter doesn’t use OEM widgets

from flutter.

from flutter.

@mravn-google the google_mobile_maps repo seems to have disappeared; Do you have any info?

from flutter.

Renamed the present bug to make it clearer that this tracks inline 'Google Maps' support.

from flutter.

@mit-mit Just to be clear, that means that flutter will not provide a way to render offline maps?

from flutter.

@feinstein there is a working bare bones plugin in the Flutter/plugins repo under google_maps_flutter.

from flutter.

Sorry, we have no public schedule we can communicate yet :-(.

As mentioned a few comments up, our latest progress is in the plugins repo, and it does currently hold a very early version with some documented deficiencies. You may want to take a look at that.

from flutter.

hello there is way to customize the toolbar in map_view? or add widgets (floatingactionbutton). https://pub.dartlang.org/packages/map_view

currently map_view opens a new window full screen with a slide to the left with a black toolbar. I would like to customize the page transistion , color toolbar and add widgets to interact without having to go back.

Finally, it would not be possible to have the dynamic map in a pop up box instead of a full screen?

thank you

from flutter.

@nitneuq33000 The map_view plugin is not maintained by the Flutter team. Please open issues at https://github.com/apptreesoftware/flutter_google_map_view.

from flutter.

@mravn-google Is polyline support on the roadmap for this plugin?

(what I've seen so far in the /example folder looks great btw!)

from flutter.