Ionic Native Google Maps plugin - set app background color

Question

I'm having trouble with Ionic 3, specifically setting the app background color when using the native Google Maps plugin. The map is a native element "under" the browser, and having background color set for the Ionic app covers the map and prevents it from showing.

When looking at the docs, there is a setBackgroundColor(color) method in the Environment class, but I have no idea where I'm supposed to use that class. Does anyone know?

score 0 · Accepted Answer · answered Nov 02 '17 at 19:55

0

Ok, I simply instantiated the Environment class and then called setBackgroundColor. Like this:

import { Environment } from '@ionic-native/google-maps`;

export class MyClass {

  environment: Environment = null;

  myMethod(): void {
    this.environment = new Environment();
    this.environment.setBackgroundColor("red");
  }
}

answered Nov 02 '17 at 19:55

mkkekkonen

1,704
2
18
35

is there any way to set a linear-gradient as a background color?¿ – Hanzo Jun 08 '20 at 17:08

wf9a5m75 · Answer 2 · 2017-11-09T01:19:55.363

Wow. It's kind of surprised for me. @mkkekkonen's answer worked certainly, but it is not my intended design way. (I'm the author of cordova-plugin-googlemaps, and main maintainer of @ionic-native/google-maps plugin).

The Environment, Geocoder, Spherical, Poly(oh, not implemented yet), and Encoding classes are static class in original plugin.

For example, I think nobody do like this, but it is possible. This is not my intended way.

import { Environment } from '@ionic-native/google-maps`;

export class MyClass {

  environment: Environment = null;

  myMethod1(): void {
    (new Environment()).setBackgroundColor("red");
  }
  myMethod2(): void {
    (new Environment()).setBackgroundColor("blue");
  }
}

The correct way is to use provider (@4.3.3)

@IonicPage()
@Component({
  selector: 'page-set-background-color',
  templateUrl: 'set-background-color.html',
  providers: [
    Environment
  ]
})
export class SetBackgroundColorPage {

  map: GoogleMap;

  constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      public environment: Environment,
      public googleMaps: GoogleMaps) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SetBackgroundColorPage');
    this.map = this.googleMaps.create('map_canvas');
    this.environment.setBackgroundColor('red');
  }

}

Please use this way, mkkekkonen. I will fix this bug in the next release.

update

In the next release after @ionic-native@4.3.4, the code would be like this:

@IonicPage()
@Component({
  selector: 'page-set-background-color',
  templateUrl: 'set-background-color.html'
})
export class SetBackgroundColorPage {

  map: GoogleMap;

  constructor() {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SetBackgroundColorPage');
    this.map = GoogleMaps.create('map_canvas');
    Environment.setBackgroundColor('red');
  }

}

Ionic Native Google Maps plugin - set app background color

2 Answers2