Buttons inside map

[gigiojr]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I created one projec with some buttons inside map_canvas, but the buttons aren't clickable, so I opened a issue#1097 in Google Maps plugin's page and sended some prints of the problem, but he didn't see nothing wrong and, after I updated to rc3, I did other project with the same problem works. However, still there is a problem with project of example because the example is a little different.

Expected behavior:
All buttons inside Map are clickables

Steps to reproduce:

1. Download project mapTest
2. Install plugins and android platform
3. Run aplication in device (I used nexus 5 with Android 6.0.1)

Related code:

#map-canvas {
  width: 100%;
  height: 100%;
}

<ion-header>
  <ion-navbar>
    <ion-title>
      Map Test
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id="map-canvas">
    <div>
      <button ion-fab color="secondary" style="margin-bottom: 10px; margin-top: 10px;" (click)="refreshMap()">
        <ion-icon name="locate"></ion-icon>
      </button>
      <div style="width: 30px; margin-right: 31px; bottom: 150px; right: 0; position: absolute;">
        <button (click)="changeLevel('1')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">1</button>
        <button (click)="changeLevel('2')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">2</button>
        <button (click)="changeLevel('3')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">3</button>
        <button (click)="changeLevel('4')" style="font-size: 2.5rem; margin-bottom: 5px; height: 30px; width: 30px; background-color: #6FB105; text-align: center; color: #f4f4f4">4</button>
      </div>
      <div style="width: 30px; margin-right: 41px; bottom: 30px; right: 0; position: absolute;">
        <button ion-button fab style="margin-bottom: 10px; margin-top: 10px;" (click)="getMyLocation()">
          <ion-icon name="locate"></ion-icon>
        </button>
      </div>
    </div>
  </div>
</ion-content>

import { Component } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';

declare var plugin:any;
declare var cordova:any;

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

  private map:GoogleMap;

  constructor(public navCtrl: NavController, private platform: Platform) {
    this.platform.ready().then(() => this.onPlatformReady());
  }

  private onPlatformReady():void {
    GoogleMap.isAvailable().then(() => {
      this.map = new GoogleMap('map-canvas');
      this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
        this.onMapReady();
      });
    });
  }

  private onMapReady():void {
    if ((<any>window).plugin && plugin.google && plugin.google.maps) {
      this.map.clear();
      this.map.setIndoorEnabled(false);
      this.map.setTrafficEnabled(false);
      this.map.setDebuggable(true);
      this.map.setMapTypeId(plugin.google.maps.MapTypeId.SATELLITE);
      this.map.setOptions({
        controls: {
          compass: false,
          myLocationButton: false,
          indoorPicker: false,
          zoom: false
        },
        gestures: {
          scroll: true,
          tilt: false,
          rotate: true,
          zoom: true
        },
        camera: {
          latLng: new GoogleMapsLatLng(59.452624, -85.846621),
          zoom: 17
        }
      });
    }
  }

  refreshMap(){
    this.map.refreshLayout();
    console.log("refresh");
  }

  changeLevel(levelName){
    console.log("changeLevel: " + levelName);
  }

  getMyLocation(){
    console.log("getMyLocation");
  }
}

Other information:
In the other project that the buttons worked, I needed change all [hidden] to [style.display]="(variable) ? 'block' : 'none'" because the first option didn't work, but I don't know why.

[tuliobraga]

Well, I was facing this issue if the button/input was placed outside the map canvas div. Then, placing the elements inside the map div it worked. If anyone needs to see a working example, clone this repository.

I believe this issue can be closed @brandyscarney.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!