how to customize ?

[nitneuq33000]

hello there is way to customize the toolbar in map_view? or add widgets (floatingactionbutton).

example :

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, or in a card ?

thank you

[andreagr]

That would really be nice.
Also adding custom markers would be a very useful feature.
I guess these enhancement could be added quite easily adding some fields to the proper pages. We could try to propose some additions to the code.

[johnpryan]

If you want an in-line map or custom widgets overlaying the map, consider using https:/apptreesoftware/flutter_map instead. If that doesn't work for your use case, let us know- we are always looking for feedback!

[andreagr]

Would it be suitable for a production app? I can see there would be the need to choose between different tile providers.
Having to pay for a good one there doesn't appeal a lot to me...I forked, I will try to see if I can integrate some functions, and in case I will show it to you, so you can consider pulling it

[bstuddard]

Custom marker info/titles would be a good addition.

For example, the ability to render a widget as info instead of simple title strings. Would allow for interesting custom information piped in about a marker/place when selected.

[ericam92]

custom markers and a little customization of the toolbar would be a great addition to this widget. I'm glad to see other users think the same

[bstuddard]

I'm not experienced in Kotlin, so I'll just throw this idea out there to see what everyone thinks. What if a custom info window was implemented? I did some digging and found that the customization likely has to do with configurations of the google libraries.

For example, a custom InfoWindowAdapter could be implemented and then in the onMapReady overridden function in the MapActivity.kt file, a call could be made to set the GoogleMap object with a custom InfoWindowAdapter as such GoogleMap.setInfoWindowAdapter(). The custom window adaptor could be as simple as rendering a textview that takes a HTML string. This would allow flexibility on behalf of the Flutter developer to pass in a more customized text rather than a simple string.

Thoughts?
https://developers.google.com/maps/documentation/android-sdk/infowindows

Maybe something like this for the custom info window class:

  package com.apptreesoftware.mapview
  class InfoWindowCustom(internal var context: Context) : GoogleMap.InfoWindowAdapter {
      internal var inflater: LayoutInflater
      @Override
      fun getInfoContents(marker: Marker): View? {
          return null
      }

      @Override
      fun getInfoWindow(marker: Marker): View {
          inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
          // R.layout.echo_info_window res/layout folder
          val v = inflater.inflate(R.layout.echo_info_window, null)
          val title = v.findViewById(R.id.textViewInfoWindow) as TextView
          title.setText(Html.fromHtml(marker.getTitle()))
          return v
      }
  }

A simple layout file added:

`

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

`

And then adding this line to the onMapReady function of the MapActivity Class:

map.setInfoWindowAdapter(InfoWindowCustom(this))

[bstuddard]

FYI, I added a pull request associated with the above comment.

[bstuddard]

@nitneuq33000
I was also able to implement the custom marker image on android. In MapActivity.kt from the plugin src.main, you'll want to customize the createMarkerForAnnotation function.

You can get a bitmap and then pass it into the MarkerOptions instead of the defaultMarker as such:

Getting a marker bitmap:

val markerBitmapFlutter = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher)

Customizing the MarkerOptions passed in when adding a marker:

val markerOptionsFlutter = MarkerOptions()
            .position(annotation.coordinate)
            .title(annotation.title)
            .icon(BitmapDescriptorFactory.fromBitmap(markerBitmapFlutter))

Adding the marker with custom marker options:

marker = map.addMarker(markerOptionsFlutter)

Of course, I just use the launcher icon as an example, you can use whatever you need. I believe you could also render an xml file as bitmap and then pass that in. I didn't implement for my use case, but I'm sure it's possible. Hope this helps.

[andreagr]

This seems really interesting! @bstuddard hope it can get implemented into the library officially, also with iOS support. Thanks a lot for you contribution!

[nitneuq33000]

@bstuddard thanks for your contribution !
Currently the major problem for my app is the color of the appbar of map_view in full screen. No way to easily custom color appbar ?

[andreagr]

I have been looking at the plugin suggested by jhonpryan above. I have to say that it actually answers to many of the issues presented here. It's more customizable and I might say even kinda easier to use.
The only problem is that it doesn't support google maps, so that might be an issue, even though i think adding a couple of things could be just perfect. #

[matthewtsmith]

We have no plans to support further customization in this library unless the community wants to contribute it. All of our dev focus is on the library that @johnpryan mentioned: https:/apptreesoftware/flutter_map