map.html

<ion-content no-padding>

  <div #map id="map" style="height: 100%;">
    <ion-header>
      <ion-input type="text" placeholder="Type you address..."></ion-input>
    </ion-header>
    <ion-footer>
      <ion-row>
        <ion-col>
          <button ion-button block  (click)="callButton1()">Button 1</button>
        </ion-col>
        <ion-col>
          <button ion-button block (click)="callButton2()">Button 2</button>
        </ion-col>
      </ion-row>
    </ion-footer>
  </div>

</ion-content>

map.ts

@IonicPage({
  name: 'map'
})
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {

  map: GoogleMap;
  constructor(
    private googleMaps: GoogleMaps
  ) {
  }

  ngAfterViewInit() {
    this.loadMap();
  }

  loadMap() {
    let element: HTMLElement = document.getElementById('map');

    this.map = this.googleMaps.create(element);

    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('map ready');
      });

    let cdw: LatLng = new LatLng(41.397766, 2.135378);

    let position: CameraPosition = {
      target: cdw,
      zoom: 14,
      tilt: 30,
    };

    this.map.moveCamera(position);

    let markerOptions: MarkerOptions = {
      position: cdw,
      title: 'Cursosdesarrolloweb'
    };

    this.map.clear();

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

  public callButton1() {
    alert('button 1');
  }

  public callButton2() {
    alert('button 2');
  }
}