How can I add mylocationbutton in google maps ionic native ? Ionic version 3.16

Ionic Framework ionic-v3
1

I need to add mylocationbutton to my map

CAPTURA

This is my code

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams , Platform } from 'ionic-angular';
import {GoogleMaps,GoogleMap,GoogleMapsEvent,LatLng,CameraPosition,MarkerOptions,Marker} from '@ionic-native/google-maps';
import {Geolocation , Geoposition} from '@ionic-native/geolocation';



/**
 * Generated class for the HomeTuristaPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-homeTurista',
  templateUrl: 'homeTurista.html',
  providers: [GoogleMaps , Geolocation]
 
})
export class HomeTuristaPage {

  public map: GoogleMap;
  public image: any;

  
  myPosition: any = {};
  markers: any[] = [
    {
      position:{
        latitude: -12.1191628,
        longitude: -77.04096549999997,
      },
      title:'Guia 1'
      
    },
    {
      position:{
        latitude: -12.119511,
        longitude: -77.04018,
      },
      title:'Guia 2'
      
    },
    {
      position:{
        latitude: -12.119374,
        longitude: -77.039803,
      },
      title:'Guia 3'
      
    }
   
  ];

 

  constructor(public navCtrl: NavController, public navParams: NavParams ,
     public googleMaps:GoogleMaps , public geolocation: Geolocation ) {
  }

  ionViewDidLoad(){
    this.getCurrentPosition();
  }

  getCurrentPosition(){
    this.geolocation.getCurrentPosition()
    .then(position => {
      this.myPosition = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
      this.loadMap();
      
    })
    .catch(error=>{
      console.log(error);
    })

  }


  

  loadMap(){
    // create a new map by passing HTMLElement
    let element: HTMLElement = document.getElementById('map');
   

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

    // create CameraPosition
    let position: CameraPosition<LatLng> = {
      target: new LatLng(this.myPosition.latitude, this.myPosition.longitude),
      zoom: 17,
      tilt: 30,
      
      
    };

    
    this.image ='assets/imgs/marker.png';
  
    

    this.map.one(GoogleMapsEvent.MAP_READY).then(()=>{

      
      console.log('Map is ready!');

      // move the map's camera to position
      this.map.moveCamera(position);

      let markerOptions: MarkerOptions = {
        position: this.myPosition,
        title: "Hola , soy turista!",
        icon: this.image
      };

      this.addMarker(markerOptions);

      this.markers.forEach(marker=>{
        this.addMarker(marker);
      });
      
    });
  }


  addMarker(options){
    let markerOptions: MarkerOptions = {
      position: new LatLng(options.position.latitude, options.position.longitude),
      title: options.title,
      icon: options.icon
    };
    this.map.addMarker(markerOptions);
  }

  
}
2

I want also a solution to this problem. I am using Google API v3.

3 
import { GoogleMaps, GoogleMap, GoogleMapOptions } from '@ionic-native/google-maps';
//...
map: GoogleMap;
//...
let mapOptions: GoogleMapOptions = {
         controls: {
           myLocationButton: true         
         }, 
         //...
}
this.map = GoogleMaps.create('map_canvas', mapOptions);
// ...

Or you can manually add a button wherever you want, like so…

  <div id="map_canvas">
    <ion-fab bottom right><button color="light" ion-fab (click)="somefunction()"><ion-icon ios="ios-locate-outline" md="md-locate"></ion-icon></button></ion-fab>
  </div>