Google Maps native problem related to GoogleMapsLatLng


#1

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


#2

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


#3

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.


#4

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/


#5

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: (?, ?)


#6

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


#7

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);
}

#8

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


#9

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

Sorry for the wrong info.


#10

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