Ionic 3: google map hides if background overwriten

Hi there!

So, ionic 3 has a good sass feature: [overwriting variables] ( overwrite variable. To customise my app, I changed $background-color on my own colour.

Then I needed to implement a google-map, so I installed cordova-plugin-googlemaps plugin. And when map was initialized I didn’t see it. After looking for solutions I tried to change ion-app._gmaps_cdv_ .nav-decor to transparent and none, it didn’t help. If I remove $background-color it appears in Android Emulator. In XCode emulator it doesn’t. Tried to fix it also with position: absolute and z-index, didn’t help.

home.html =>


    <div #map id="map" style="height: 360px;"></div>


<ion-footer no-shadow padding>
    <ion-toolbar position="bottom">
        <button ion-button block large upercase color="danger">cancel request</button>

home.ts =>

import { Component } from '@angular/core';
import {
} from 'ionic-angular';
import {
} from '@ionic-native/google-maps';

    selector: 'home-page',
    templateUrl: 'home.html'
export class HomePage {

    constructor(public  navCtrl: NavController,
                public  googleMaps: GoogleMaps) {}

    ionViewDidLoad() {

    loadMap() {

        let element: HTMLElement = document.getElementById('map');
        let map: GoogleMap = this.googleMaps.create(element);

        let pos: LatLng = new LatLng(31.771959, 35.217018);

        // create CameraPosition
        let position: CameraPosition = {
            target: pos,
            zoom: 14,
            tilt: 30

        //create marker
        let markerOptions: MarkerOptions = {
            position: pos,
            title: 'Hello'

        // map ready event
            //move camera to position
            .then(() => map.moveCamera(position))
            //add a marker
            .then(() => map.addMarker(markerOptions),
                //show some info
                (marker) => marker.showInfoWindow());



How does it look like? When I set variable $background-color other pages were changed. But map page is …

Android emulator

iOS emulator

Ionic info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.6 
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.3.2 Build version 8E2002

android platform 6.2.1
ios platform 3.9.0 (otherwise xcode doesn’t build app)
cordova-plugin-googlemaps 1.4.0

Wrap this.loadMap( ) in constructor around a platform.ready call

constructor (
	private googleMaps: GoogleMaps,
	private platform: Platform,
	private navCtrl: NavController) 
	this.platform.ready().then(() => {

@Vino99 Nope, it’s still the same. On both emulators.

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: Look at the console and network tabs for errors.

UPDATE: somehow I could build app in iOS 4.0.1 and now map looks like in android.

@Sujan12 thanks, I’ll try it

Also I’ve got a good answer, it can helps for understanding this issue