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
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
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;
}
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)); }); }); }
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");
}
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
OS:
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
ngOnInit(){
let pageArray = document.getElementsByClassName(“show-page”);
for(var i = pageArray.length-1; i>= 0; i–){
pageArray[i].classList.remove(‘show-page’);
}
}
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 ?
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:
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?
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
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(); });*/
});
}
}
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.
- 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