Google Maps - don't work

justintross · July 20, 2016, 7:59pm

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

malma67 · July 20, 2016, 9:07pm

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

justintross · July 20, 2016, 10:57pm

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.

idiosyncraticee · July 21, 2016, 4:28pm

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?

idiosyncraticee · July 23, 2016, 6:24am

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

https://github.com/driftyco/ionic/issues/7157

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

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

andrelins · August 3, 2016, 7:02pm

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(()=>{ this.map = new GoogleMap("map"); this.map.setClickable(false); this.map.setZoom(20); this.map.setCenter(new GoogleMapsLatLng(-8.0475622,-34.8769643)); }); }); }

devnullrandom · August 10, 2016, 3:41pm

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

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

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

UPDATE

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

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

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

richardmarais · August 24, 2016, 1:45pm

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

alejandrocao · September 10, 2016, 3:24am

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
OS:
Node Version: v6.3.0

alejandrocao · September 16, 2016, 3:14am

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?

morcth · September 16, 2016, 4:01am

Try this in your map.ts

ngOnInit(){
let pageArray = document.getElementsByClassName(“show-page”);
for(var i = pageArray.length-1; i>= 0; i–){
pageArray[i].classList.remove(‘show-page’);
}
}

marlonwanger · September 16, 2016, 11:50pm

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

marlonwanger · September 16, 2016, 11:50pm

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

alejandrocao · September 17, 2016, 2:45am

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?

morcth · September 17, 2016, 4:43am

@alejandrocao

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:

ngOnDestroy(){
this.myMarker.remove();
}

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

alejandrocao · September 23, 2016, 1:52am

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

tgreenwald · October 26, 2016, 5:10pm

Any updates here? Having same issue…

Nishchit14 · October 27, 2016, 5:54am

This works for me

import { Component, OnInit, ViewChild } from ‘@angular/core’;
import { Platform, Events } from ‘ionic-angular’;
import {
GoogleMap,
GoogleMapsEvent,
GoogleMapsLatLng,
CameraPosition,
GoogleMapsMarkerOptions,
GoogleMapsMarker
} from ‘ionic-native’;

declare let plugin:any;

@Component({
templateUrl: ‘index.html’
})
export class Map implements OnInit {

@ViewChild('map') mapElement;
map:GoogleMap;

constructor(public platform:Platform, public events:Events) {

    platform.ready().then(() => {
        this.loadMap();
    });
}

ngOnInit() {

    this.events.subscribe('sidebar:open', d=> {
        this.map.setClickable(false)
    })

    this.events.subscribe('sidebar:close', d=> {
        this.map.setClickable(true)
    })

loadMap() {

    let location = new GoogleMapsLatLng(21.562547, 71.2955583);
    let GORYOKAKU_JAPAN = new GoogleMapsLatLng(41.796875, 140.757007);

    this.map = new GoogleMap('map', {
        'backgroundColor': 'white',
        'mapType': plugin.google.maps.MapTypeId.HYBRID,
        '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
        }
    });

    //this.map.setMapTypeId('TERRAIN');

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
        //console.log('Map is ready!');

        let position:CameraPosition = {
            target: location,
            zoom: 15,
            tilt: 20
        };
        this.map.moveCamera(position);

        /* let markerOptions:GoogleMapsMarkerOptions = {
         position: location,
         title: 'Ionic'
         };

         this.map.addMarker(markerOptions)
         .then((marker:GoogleMapsMarker) => {
         marker.showInfoWindow();
         });*/

});

}

Abashin · October 27, 2016, 6:24pm

Hello!
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”);

        this.map = new GoogleMap('map_canvas');
        this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
          alert("GoogleMap.onMapReady(): " + JSON.stringify(data));
        });
      });

		})
	}

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

0x1AD2 · January 18, 2017, 2:35pm

Check if you installed the plugin a correct way.
Validate your API keys at console.developers.google.com
Be sure the HTML element where the maps get injected into has a
predefined height property.
Be sure you run your app on a connected or virtual
device.

If that doesn’t work: I’ve created an Ionic 2.0.0-rc.5 starter with minimal functionality https://github.com/0x1ad2/ionic2-starter-google-maps