Property MAP_READY does not exist on type string ' {[eventName:string]:string;}'


#1

After updating Google Map Ionic native plugin

I am getting these error.

Property MAP_READY does not exist on type string ’ {[eventName:string]:string;}’

Property MARKER_CLICK does not exist on type string ’ {[eventName:string]:string;}’


import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
 } from '@ionic-native/google-maps';


export class Map{

  map: GoogleMap;
  mapElement: HTMLElement;

 constructor(private googleMaps :GoogleMaps) {
 

 loadMap() {

    this.mapElement = document.getElementById('map');

    let mapOtions : GoogleMapOptions={

      camera:{
        target:{
          lat:this.lat1,
          lng:this.lng1
        },
        zoom:18,
        tilt:30,
        bearing:50
      }
    }
      this.map = this.googleMaps.create(this.mapElement,mapOtions);
      this.map.one(GoogleMapsEvent.MAP_READY).then(
      () => {
        console.log('Map is ready!')
        this.map.addMarker({
          icon:'blue',
          animation:'DROP',
          title: "XXX",
          position: {
            lat:this.lat1,
            lng:this.lng1
          }

        }).then(marker=>{
          marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(()=>{
            console.log("MARKER CLICKED");
          })
        })
        this.map.getMyLocation().then(succ=>{
            console.log("Mylocation : ",succ)
        },err=>{
          console.log("Error on GETTING LOCATION :",err)
        })
        this.map.setMyLocationEnabled(true);
    
      });
}
}

HTML :

<page-header></page-header>
 <ion-content>
 <div #map id="map"></div>
 </ion-content>

Package.Json :

"@ionic-native/google-maps": "^3.10.3",

Config :

 <plugin name="cordova-plugin-googlemaps" spec="~1.4.0">
    <variable name="API_KEY_FOR_ANDROID" value="XXXX"/>
    <variable name="API_KEY_FOR_IOS" value="XXXX"/>
  </plugin>

#2

Solved:


import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
 } from '@ionic-native/google-maps';


export class Map{

  map: GoogleMap;
  mapElement: HTMLElement;
private mapEvent:any;

 constructor(private googleMaps :GoogleMaps) {
 this.mapEvent = GoogleMapsEvent;

 loadMap() {

    this.mapElement = document.getElementById('map');

    let mapOtions : GoogleMapOptions={

      camera:{
        target:{
          lat:this.lat1,
          lng:this.lng1
        },
        zoom:18,
        tilt:30,
        bearing:50
      }
    }
      this.map = this.googleMaps.create(this.mapElement,mapOtions);
      this.map.one( this.mapEvent.MAP_READY).then(
      () => {
        console.log('Map is ready!')
        this.map.addMarker({
          icon:'blue',
          animation:'DROP',
          title: "XXX",
          position: {
            lat:this.lat1,
            lng:this.lng1
          }

        }).then(marker=>{
          marker.on( this.mapEvent.MARKER_CLICK).subscribe(()=>{
            console.log("MARKER CLICKED");
          })
        })
        this.map.getMyLocation().then(succ=>{
            console.log("Mylocation : ",succ)
        },err=>{
          console.log("Error on GETTING LOCATION :",err)
        })
        this.map.setMyLocationEnabled(true);
    
      });
}
}