8

How do you change the position of the Google logo (originally at the bottom left corner) and other map buttons (location, zoom in/out, etc.) of the GoogleMap widget?

I would also like to know if you can disable/enable them.

I am using google_maps_flutter package version ^0.5.19.

davidionita
  • 85
  • 1
  • 9
Rami Mohamed
  • 2,505
  • 3
  • 25
  • 33
  • https://developers.google.com/maps/terms-20180207#8-licenses-from-google-to-you - *8.4.b viii: You will not: remove, distort, or alter any element of a Google Brand Feature (including squeezing, stretching, inverting, or discoloring).* – MrUpsidown Aug 31 '19 at 07:42
  • 1
    I don't want to do any of alternations mentioned by google terms of service, I just want to slightly shift the position of google logo to make it more visible since it is now covered by the rectangular button I have at the bottom of my app, some of famous apps like : Uber, Careem managed to relocate google logo with no problems. I don't think this breaches google maps terms of service – Rami Mohamed Aug 31 '19 at 08:05
  • 1) Because Uber did it doesn't mean you are allowed to do it... (maybe you are although I am not aware of any setting to reposition the logo) 2) How did you add your button to the map? We don't know since you haven't shared any code 3) The Javascript API has "custom controls" that you can use and which will prevent your buttons from overlapping with any other existing control or feature, including the logo. I don't know if the same is available in Flutter. If it is, you should probably use it. – MrUpsidown Aug 31 '19 at 08:20
  • 1
    I think relocating google logo position to a visible place is a MUST, in case it is obscured/covered by any of your app widgets..... If you took a quick look over google maps app on android, they managed to make google logo dynamic. it is moving up and down together with the vertical drawer..... I am using flutter official google maps package V : ^0.5.19 , as far as I know it doesn't have control over logo position exposed yet. – Rami Mohamed Aug 31 '19 at 08:51
  • 100% with you on that. And that's, I suppose, why they offered this functionality in the JS API. If you can't find anything like that in Flutter, you may open a feature request: https://github.com/flutter/flutter/issues – MrUpsidown Aug 31 '19 at 08:56
  • 1
    new feature request opened here : https://github.com/flutter/flutter/issues/39610 – Rami Mohamed Aug 31 '19 at 09:14

4 Answers4

6

I found a workaround, not the best solution I guess, but should work

simply add padding to GoogleMap() widget, set bottom and left values as your wish

new GoogleMap(
    padding: EdgeInsets.only(bottom: 100, left: 15), // <--- padding added here
    // rest of parameters
    // ....
)

NOTE !!

If you pick locations from a point at the center of the screen, adding padding to GoogleMap() should affect/change the values of location picked. so have that considered.

Thank you

Rami Mohamed
  • 2,505
  • 3
  • 25
  • 33
5

Google has already simplified this for you, adapting from Rami answer, you can simply do the following to add padding to your map

      GoogleMap(
        myLocationEnabled: true,
        padding: EdgeInsets.only(bottom: mapBottomPadding, top: 0, right: 0, left: 0),
        myLocationButtonEnabled: true,
        compassEnabled: true,
        mapToolbarEnabled: true,
        mapType: MapType.normal,
        markers: _markers,
        initialCameraPosition: _kLake,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
          mapController = controller;
          setState(() {
            mapBottomPadding = 280;
            _goToTheLake();

          });
        },
      ),

The map camera target is adjusted accordingly based on the padding applied to the map either to the left, top, right or bottom.

for further readings go here

Hope this helps.

Uchenna Nnodim
  • 458
  • 4
  • 11
3

As mentioned by this GitHub issue (open as of July 22, 2020), you must use a StatefulWidget and setState() method when setting padding for the Google Maps logo (or other map buttons). Without calling setState(), the padding will not properly apply on Android. This seems to be an issue with the native Android Maps SDK, as the same padding issue occurs in React Native's Google Maps package.

As per Google Maps Platform Terms of Service, you must display the Google logo on your Google Map at all times, so you cannot remove it without a workaround. However, you can remove other buttons on the Google Map, like the location and zoom in/out buttons.

See the example below for an implementation of padding on the Google Maps logo, as well as removing the location and zoom in/out buttons:

GoogleMap(
    //padding parameter for positioning the Google logo and other map buttons
    padding: EdgeInsets.only(
        bottom: 120,
    ),
    //remove zoom in/out buttons
    zoomControlsEnabled: false,
    //remove location button
    myLocationButtonEnabled: false,
    initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 12.0,
    ),
    onMapCreated: (GoogleMapController controller) {
        //required to apply padding correctly on Android
        setState(() {});
    },
)

To find more info on on parameters of the GoogleMap widget, view the google_maps_flutter package documentation .

davidionita
  • 85
  • 1
  • 9
  • 1
    It doesn't need to be in the StatefulWidget widget. It works well in the StatelessWidget, too. – Hesam Jun 29 '21 at 19:32
1

Apparently there is no direct/reliable way to do so and even if you can somehow use Stack to cover that logo you shouldn't do it either.

You might get into trouble while uploading your app on Google Playstore.

If you don't care about moral values just read through this:

9.4 Attribution.

(a) Content provided to you through the Service may contain the trade names, trademarks, service marks, logos, domain names, and other distinctive brand features of Google, its partners, or other third party rights holders of content indexed by Google. When Google provides this attribution, you must display it as provided through the Service or as described in the Maps APIs Documentation and may not delete or in any manner alter these trade names, trademarks, service marks, logos, domain names, and other distinctive brand features.

https://developers.google.com/maps/terms

Google already offers a -WIDE- range of free and freemium services from fonts to ... to ... to Flutter. Imagine if you were instead of Google what would you do if you find someone trying to misuse your app's free service which actually costs you money.

If you just want to relocate the icon edit the source code of that package by hovering on GoogleMap() while pressing Ctrl and then right click when the text turns blue. A new window with source code of GoogleMap widget will appear where you can check and edit how the position of the logo is specified but I can't guarantee you that it is allowed.

Rémi Rousselet
  • 256,336
  • 79
  • 519
  • 432
Mohit Shetty
  • 1,551
  • 8
  • 26
  • 2
    Because of its quality? Mentioning points without citing any reliable source, for example? – MrUpsidown Aug 31 '19 at 08:57
  • 1
    [blockquotes](https://stackoverflow.com/editing-help#simple-blockquotes) should be used when quoting someone or citing something. Not to add colors to your post... – MrUpsidown Aug 31 '19 at 09:20