Ionic 3: google map hides if background overwriten

Ionic Framework ionic-v3
1

Hi there!

So, ionic 3 has a good sass feature: [overwriting variables] (https://ionicframework.com/docs/theming/overriding-ionic-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 =>

<ion-content>

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

</ion-content>

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

home.ts =>

import { Component } from '@angular/core';
import {
    NavController,
    IonicPage
} from 'ionic-angular';
import {
    GoogleMaps,
    GoogleMap,
    GoogleMapsEvent,
    LatLng,
    CameraPosition,
    MarkerOptions,
    Marker
} from '@ionic-native/google-maps';


@IonicPage()
@Component({
    selector: 'home-page',
    templateUrl: 'home.html'
})
export class HomePage {

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

    ionViewDidLoad() {
        this.loadMap();
    }

    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
        map.one(GoogleMapsEvent.MAP_READY)
            //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

2

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

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

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

4

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

5

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

image
Screen Shot 2017-04-28 at 13.32.48.png313×580 60.2 KB

@Sujan12 thanks, I’ll try it

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