Google Maps - don't work

Try setting nav-decor class background to transparent. Maps renders underneath it.

Amazing! it work on iOS now thanks @justintross

to be explicit here is the fix:

ion-app.gmaps_cdv .nav-decor {
background-color: rgba(0,0,0,0);

This has actually already been logged with ionic. Shame I didn’t spot that :slight_smile:

1 Like

No problem @malma67. The issue is closed for some reason, so it makes it pretty difficult to find until you have already happened upon the work-around.

Hi, can you let me know in which file you’re applying workaround? I’ve tried this styling in the page with the map div but it’s still black. Is gmapscdv_ a placeholder for something or is it a specific div?

OK, after all that time this is what my final .scss file looks like for the page I’m trying to display in for beta10. I pieced it together from this thread and

.google-map-native {
#map_native_canvas {
width: 100%;
height: 100%;

.nav-decor {
background-color: rgba(0, 0, 0, 0) !important;

the maps but works to make changes to the map, using setCenter and setZoom has no result.

ngAfterViewInit(): void { this.platform.ready() .then(()=>{ GoogleMap.isAvailable() .then(()=>{ = new GoogleMap("map");;; GoogleMapsLatLng(-8.0475622,-34.8769643)); }); }); }

I had some success with the following (the transition is not so smooth and may need further hacking):

    document.getElementsByClassName("app-root")[0].className += ' hide';

    document.getElementsByClassName("app-root")[0].className = 'app-root';


Setting the opacity feels more appropriate and faster.
The plugin also manipulates the opacity of the map container to make the map visible:

    document.getElementsByClassName("app-root")[0].setAttribute("style", "opacity:0");

    document.getElementsByClassName("app-root")[0].setAttribute("style", "opacity:1");

I add the plugin to my config.xml etc. but still get the same issue. Perhaps I have a different prob.

I had the same problem with the map.

I have a project with a side menu, if I configure map page as root page the maps works perfect, if I go to map page with push the page loads bad, i see the previous page in the back and the map doesn’t load.

¿How could I fix that?

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
Node Version: v6.3.0

I found that, and I understand that google maps doesn’t work for now in another page different than the root page, that’s right?

@joshmorony, could you help us with that?

Try this in your map.ts

let pageArray = document.getElementsByClassName(“show-page”);
for(var i = pageArray.length-1; i>= 0; i–){

I am also having the same problem, found some solution?

Yes, it worked for me too, but the navbar disappeared, along with the button to return. as you did ?

1 Like

Yes @marlonwanger , @morcth solution works as a workaround, now I can see the map in a page different from the root, but the problem now is that every time I open a map page the markers I get the same one with the markers I already had added, how can I do to recreate or clean the map previously?


I only have one marker on my map at a time. When I create it, I set it to this.myMarker.

Then I use this to remove it when going back:


If you are using multiple markers, maybe you can point to them all in an array and remove them all with a foreach?

The same happened to me @marlonwanger the navbar disappeared… Any ideas @devnullrandom, how do you solve that?

Any updates here? Having same issue…

This works for me :slight_smile:

import { Component, OnInit, ViewChild } from ‘@angular/core’;
import { Platform, Events } from ‘ionic-angular’;
import {
} from ‘ionic-native’;

declare let plugin:any;

templateUrl: ‘index.html’
export class Map implements OnInit {

@ViewChild('map') mapElement;
constructor(public platform:Platform, public events:Events) {
    platform.ready().then(() => {
ngOnInit() {'sidebar:open', d=> {
    })'sidebar:close', d=> {
loadMap() {
    let location = new GoogleMapsLatLng(21.562547, 71.2955583);
    let GORYOKAKU_JAPAN = new GoogleMapsLatLng(41.796875, 140.757007); = new GoogleMap('map', {
        'backgroundColor': 'white',
        'controls': {
            'compass': true,
            'myLocationButton': true,
            'indoorPicker': true,
            'zoom': true
        'gestures': {
            'scroll': true,
            'tilt': true,
            'rotate': true,
            'zoom': true
        'camera': {
            'latLng': GORYOKAKU_JAPAN,
            'tilt': 30,
            'zoom': 15,
            'bearing': 50
    //'TERRAIN'); => {
        //console.log('Map is ready!');
        let position:CameraPosition = {
            target: location,
            zoom: 15,
            tilt: 20
        /* let markerOptions:GoogleMapsMarkerOptions = {
         position: location,
         title: 'Ionic'
         .then((marker:GoogleMapsMarker) => {


I have problem with maps in ionic2, map show success message - map ready, but no map in view, only white screen.
below code from my page
ngAfterViewInit() {
this.platform.ready().then(() => {
GoogleMap.isAvailable().then(() => {
console.log(“isAvailable”); = new GoogleMap('map_canvas'); any) => {
          alert("GoogleMap.onMapReady(): " + JSON.stringify(data));


Please help me, i dont understand what’s wrong.

  1. Check if you installed the plugin a correct way.
  2. Validate your API keys at
  3. Be sure the HTML element where the maps get injected into has a
    predefined height property.
  4. Be sure you run your app on a connected or virtual

If that doesn’t work: I’ve created an Ionic 2.0.0-rc.5 starter with minimal functionality