Google Maps native problem related to GoogleMapsLatLng

Hello Guys,
I have followed “https://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/” tutorial last week step by step and everything works fine for me and when I created a new project today and tried to use it. This is not working, my guess this is due to the ionic native launch that happened on 24 March. I have replaced this line “import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from ‘ionic-native’;” with this “import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions, Marker } from ‘@ionic-native/google-maps’;” as this is mentioned in the official documentation and I have checked that now plugins going into the @ionic-native folder rather than ionic-native inside node_modules and it was giving error like no provider for the GoogleMaps, So I have added it in the “app.module.ts” file now it is not giving that error but still not able to find the “GoogleMapsLatLng” and I have searched the entire project but does not able to any reference to “GoogleMapsLatLng” and I have also tried to change “GoogleMapsLatLng” with “LatLng” but it still didn’t work please suggest something soon.

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.10.0
Xcode version: Not installed

Thanks

It’s all changed a bit with the latest version of ionic native 3.x.

For example you’d now do:
import { GoogleMaps, GoogleMap, LatLng, MarkerOptions, Marker, GoogleMapsEvent, VisibleRegion, CameraPosition } from '@ionic-native/google-maps';
And not use the ‘ionic-native’ any more - Remove that reference from you package.json

Add in
"@ionic-native/core": "3.3.1", "@ionic-native/google-maps": "3.3.1"

Then you can do
constructor( private _googleMaps: GoogleMaps ) { etc

And reference like
this._googleMaps.isAvailable().then(() =>

The static references have gone away now.

You’ll have to update a few types like moving to LatLng etc

It would be really great if you can refer any document that has some sample basic code for the google map as I have tried what you have said but it didn’t work out for me.

You should just be able to take the article you were referring to and adjust to use the new ionic-native 3.x.
Check updated documentation here: http://ionicframework.com/docs/v2/native/

here is the code i used
loadMap(){
this.googleMaps.isAvailable().then(()=>{
let location = new LatLng(-34.9290,138.6010);

    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': location,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });

  }) 
}

and this is the error i got
Uncaught Error: Can’t resolve all parameters for GoogleMap: (?, ?)

That looks fairly identical to mine so not sure what’s causing that one.

You shouldn’t call new GoogleMap(). What you should be doing is:

import { GoogleMaps, GoogleMap } from '@ionic-native/google-maps';
...
constructor(private googleMaps: GoogleMaps) {}
...
ngAfterViewInit() {
  const options: any = { ... } // put your config here
  const map: GoogleMap = this.googleMaps.create('map', options);
}

Ah yes that makes more sense. Interestingly the old “new GoogleMap” still works for me.
Thanks!

Oh yeah I just checked. Calling new GoogleMap() should still work.

Sorry for the wrong info.

import { Component, ViewChild, ElementRef } from ‘@angular/core’;

import { NavController, Platform } from ‘ionic-angular’;

import { Geolocation } from ‘@ionic-native/geolocation’;

import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
MarkerOptions,
Marker
} from ‘@ionic-native/google-maps’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
@ViewChild(‘map’) mapElement: ElementRef;

map: GoogleMap;
latLng: any;

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

getCurrentPosition(){
this.getCurrentPosition().
then( position => {

    let lat = position.coords.latitude;
    let lng = position.coords.longitude;

    this.latLng = new LatLng(lat, lng)

    this.loadMap();
});

}

loadMap(){
this.map = new GoogleMap(‘map’, {

    'controls': {
    'compass': true,
    'myLocationButton': true,
    'indoorPicker': true,
    'zoom': true,
  },
  'gestures': {
    'scroll': true,
    'tilt': true,
    'rotate': true,
    'zoom': true
  },
  'camera': {
  
    'tilt': 30,
    'zoom': 15,
    'bearing': 50
  }
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
  console.log('Map is ready!');
  this.setMarker();
});

}

setMarker(){
if(this.latLng){
let customMarker = “www/assets/custom-marker.png”;

  let markerOptions: MarkerOptions = {
    position: this.latLng,
    title: 'Mi posicion',
    icon: customMarker
  };
  
  this.map.addMarker(markerOptions)
    .then((marker: Marker) => {
      marker.showInfoWindow();
  });
}else{
  Toast.show("No se ha podido obtener su ubicación", '5000', 'bottom').subscribe(
    toast => {
      console.log(toast);
    }
  );
}

}
}

code is error in
getCurrentPosition(){
this.getCurrentPosition().
then( position => {

    let lat = position.coords.latitude;
    let lng = position.coords.longitude;

    this.latLng = new LatLng(lat, lng)

    this.loadMap();
});

}

error in then(positin =>{ …} why