MAP_DRAG_EVENTS about ionic-googlemaps-demo

[ThorvaldAagaard]

I hate git :-)

[wf9a5m75]

Could you show me whole code?

[ThorvaldAagaard]

Sure - Just to eleminate everything else i added it in the get-map.ts in the demo-project, so It looks like this

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapsMapTypeId
} from '@ionic-native/google-maps';

@IonicPage()
@Component({
  selector: 'page-get-map',
  templateUrl: 'get-map.html',
})
export class GetMapPage {
  map1: GoogleMap;
  map2: GoogleMap;
  map3: GoogleMap;

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

  ionViewDidLoad() {
    console.log('ionViewDidLoad MapGetMapPage');
    this.loadMap1();
    setTimeout(this.loadMap2.bind(this), 1000);
    setTimeout(this.loadMap3.bind(this), 2000);
  }
  loadMap1() {
    var self = this;
    this.map1 = this.googleMaps.create('map_canvas1');

    // Wait the MAP_READY before using any methods.
    this.map1.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');
        self.map1.setAllGesturesEnabled(true);
        self.map1.on(GoogleMapsEvent.MAP_DRAG_START)
          .subscribe(() => {
            console.log("--> map_canvas1 : map drag");
          });
      });
  }

  loadMap2() {
    this.map2 = this.googleMaps.create('map_canvas2', {
      'mapType': GoogleMapsMapTypeId.HYBRID,
      'controls': {
        'compass': true,
        //'myLocationButton': true,
        'indoorPicker': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      camera: {
        target: [
          { lat: 41.79883, lng: 140.75675 },
          { lat: 41.799240000000005, lng: 140.75875000000002 },
          { lat: 41.797650000000004, lng: 140.75905 },
          { lat: 41.79637, lng: 140.76018000000002 },
          { lat: 41.79567, lng: 140.75845 },
          { lat: 41.794470000000004, lng: 140.75714000000002 },
          { lat: 41.795010000000005, lng: 140.75611 },
          { lat: 41.79477000000001, lng: 140.75484 },
          { lat: 41.79576, lng: 140.75475 },
          { lat: 41.796150000000004, lng: 140.75364000000002 },
          { lat: 41.79744, lng: 140.75454000000002 },
          { lat: 41.79909000000001, lng: 140.75465 },
          { lat: 41.79883, lng: 140.75673 }
        ],
        'tilt': 60,
        'bearing': 50
      }
    });
    // Wait the MAP_READY before using any methods.
    this.map2.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log("--> map_canvas2 : ready.");

      });
  }

  loadMap3() {
    this.map3 = this.googleMaps.create('map_canvas3');
    this.map3.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log("--> map_canvas3 : ready.");
      });
  }

  onButtonClick(event) {
    console.log(event);
    alert(event.srcElement.innerText + ' is clicked');
  }

}

But I just modified the code a bit to this

       self.map1.on(GoogleMapsEvent.MAP_DRAG_START)
          .subscribe(() => {
            console.log("--> map_canvas1 : map drag");
          });
        self.map1.on(GoogleMapsEvent.CAMERA_MOVE_START)
          .subscribe(() => {
            console.log("--> map_canvas1 : map camera");
          });
        self.map1.on("map_drag_start")
          .subscribe(() => {
            console.log("--> map_canvas1 : map drag2");
          });
        self.map1.on("camera_move_start")
          .subscribe(() => {
            console.log("--> map_canvas1 : map camera2");
          });

and got this output in the console:

--> map_canvas1 : map drag2
--> map_canvas1 : map camera
--> map_canvas1 : map camera2

So maybe its a casing issue

[wf9a5m75]

Oh,...

[wf9a5m75]

I found the defined event names are old.
The current event names are
https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/multiple_maps/www/event.js

But I also have another update. Please wait for a while. I will let you know the update at here and at the slack channel.

[wf9a5m75]

Okay, I updated my @ionic-native repo.
Please rebuild and reinstall the plugin.

$> git clone https://github.com/wf9a5m75/ionic-native
 or 
$> git pull

Then

$> npm run build:core
$> npm run build:modules google-maps

After that

$> npm uninstall @ionic-native/core @ionic-native/google-maps

$> npm install (path to ionic-native)/ionic-native/dist/\@ionic-native/core/
$> npm install (path to ionic-native)/ionic-native/dist/\@ionic-native/google-maps/

[wf9a5m75]

ping

[ThorvaldAagaard]

I Installed the change, but for some strange reason I get an error when setting up the subscription

vendor.js:1443 ERROR Error: Uncaught (in promise): undefined
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:4499)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at <anonymous>

I need to find time to reinstall the maps plugin as it looks like the event.js isn't loaded

[wf9a5m75]

Did you build @ionic-native/core, @ionic-native/google-maps, then reinstall them with the latest version of the plugin?

[ThorvaldAagaard]

I followed your instructions exactly

[wf9a5m75]

Um, very storage. The event.js file has to be installed safely.
(Although ionic-native does not use it).

Could you show me node_modules/@ionic-native/google-maps?
And please could you try to reinstall the map plugin?

[ThorvaldAagaard]

The event.js is in the platform directory, so its probably just the debugger not showing it as ionic-native isn't using it. I will reinstall to see if it changes anything

[ThorvaldAagaard]

I think the problem is that I am still getting the official version

This is the content, and as you can see with a timestamp that indicate it is updated.

But i can see the code

export declare class BaseArrayClass<T> extends BaseClass {
    constructor(initialData?: T[] | any);

and that is not your version that looks like this

export class BaseArrayClass<T> extends BaseClass {

  constructor(initialData?: T[] | any) {
    super();
    if (initialData instanceof GoogleMaps.getPlugin().BaseArrayClass) {
      this._objectInstance = initialData;
    } else {
      this._objectInstance = GoogleMaps.getPlugin().BaseArrayClass(initialData);
    }
  }

This is the install statements:

D:\Dokumenter\GitHub\gmap\ionic-googlemaps-demo>npm uninstall @ionic-native/core @ionic-native/google-maps
npm WARN @ionic-native/splash-screen@3.12.1 requires a peer of @ionic-native/core@^3.6.0 but none was installed.
npm WARN @ionic-native/status-bar@3.12.1 requires a peer of @ionic-native/core@^3.6.0 but none was installed.
npm WARN ajv-keywords@2.1.0 requires a peer of ajv@>=5.0.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 114 packages and removed 2 packages in 22.631s

D:\Dokumenter\GitHub\gmap\ionic-googlemaps-demo>npm install ../ionic-native/dist/@ionic-native/core/
npm WARN @ionic-native/splash-screen@3.12.1 requires a peer of @ionic-native/core@^3.6.0 but none was installed.
npm WARN @ionic-native/status-bar@3.12.1 requires a peer of @ionic-native/core@^3.6.0 but none was installed.
npm WARN ajv-keywords@2.1.0 requires a peer of ajv@>=5.0.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @ionic-native/core@4.1.0
added 114 packages and updated 1 package in 22.563s

D:\Dokumenter\GitHub\gmap\ionic-googlemaps-demo>npm install ../ionic-native/dist/@ionic-native/google-maps
npm WARN @ionic-native/splash-screen@3.12.1 requires a peer of @ionic-native/core@^3.6.0 but none was installed.
npm WARN @ionic-native/status-bar@3.12.1 requires a peer of @ionic-native/core@^3.6.0 but none was installed.
npm WARN ajv-keywords@2.1.0 requires a peer of ajv@>=5.0.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @ionic-native/google-maps@4.1.0
added 114 packages and updated 1 package in 20.753s

[ThorvaldAagaard]

Seems that the statements

$> npm run build:core
$> npm run build:modules google-maps

isn't building my local version

[wf9a5m75]

I see.

Please try to install with --no-fetch option. This option prevents installing from local cache of npm command.

---

$> npm run build:core
$> npm run build:modules google-maps

Regarding of these command, did you execute them at top of the ionic-native directory?

Please show me the build log if you get error.

[ThorvaldAagaard]

Looking at the /dist/ directory of my clone of ionic-native I can see the wrong version, so it is probably not the fetching, but the building of ionic-native.

The output from the build is

D:\Dokumenter\GitHub\gmap\ionic-native
> node scripts/build/build.js "google-maps"

Making new TMP directory
Preparing core module package.json
Building plugin: google-maps
Done processing plugins!

D:\Dokumenter\GitHub\gmap\ionic-native>

So I think I am in the right position.

But its a local problem and I will try to figure out why I am building the worng version, no need for you to waste time on this

[wf9a5m75]

Maybe git pull?

[ThorvaldAagaard]

I can see the right code i /src. But I will make a new clone

[wf9a5m75]

@ThorvaldAagaard
I built for you. Please install from github repo.

$> cd ionic-native

$> git checkout  dev

$> cd ionic-googlemaps-demo

$> npm uninstall @ionic-native/core @ionic-native/google-maps


$> npm install (path to)/ionic-native/dist/\@ionic-native/core --no-fetch

$> npm install (path to)/ionic-native/dist/\@ionic-native/google-maps --no-fetch

$> ionic cordova run

[ThorvaldAagaard]

First of all I deleted ionic-native and followed your instructions on Slack setting up a repository for the dev-version

It might be that I am just misunderstanding how it should be.

index.ts in the src-directory contains

export class BaseArrayClass<T> extends BaseClass {

  constructor(initialData?: T[] | any) {
    super();
    if (initialData instanceof GoogleMaps.getPlugin().BaseArrayClass) {
      this._objectInstance = initialData;
    } else {
      this._objectInstance = GoogleMaps.getPlugin().BaseArrayClass(initialData);
    }
  }

After building the project I have

in the dist directory.

In index.js the code looks fine:

var BaseArrayClass = (function (_super) {
    __extends(BaseArrayClass, _super);
    function BaseArrayClass(initialData) {
        var _this = _super.call(this) || this;
        if (initialData instanceof GoogleMaps.getPlugin().BaseArrayClass) {
            _this._objectInstance = initialData;
        }
        else {
            _this._objectInstance = GoogleMaps.getPlugin().BaseArrayClass(initialData);
        }
        return _this;
    }

but in the file index.d.ts it is this code:

export declare class BaseArrayClass<T> extends BaseClass {
    constructor(initialData?: T[] | any);
    /**
     * Removes all elements from the array.
     * @param noNotify? {boolean} Set true to prevent remove_at events.
     */
    empty(noNotify?: boolean): void;

I think git is messing with my head, as I think I had a version with that code at some point in time

[wf9a5m75]

The source code is index.ts only. Other files are generated files, but they are required.

Since I made changes both the core module and the googlemaps module, you need to install both nodules.

[wf9a5m75]

Did you face any errors during the local install?

[ThorvaldAagaard]

I just realized that the index.d.ts is just a typescript-interface definition, so it is the right version.
(So I learned something valuable to day)

I am in fact on latest version of everything, so we could a problem with this version.

But what did you change in core, as far as I can see there are no updates in core lately

[wf9a5m75]

Why do you stick on the commit #00bbbe6dca ?

[ThorvaldAagaard]

OK, now I reverted to this version https://github.com/wf9a5m75/ionic-native/tree/f334cc70b94f0944a17485f0676093304e843464 and all is working fine.

So it seems that the latest commits have introduced the problem.

It puzzles me that this change was made

Why are all the constants prefixed with 'promise-'?

I can reproduce the error just by using latest version of core, google-maps and the demo project, by going into the animateCamera() demo

[wf9a5m75]

Did you reinstall the maps plugin?

[wf9a5m75]

https://ionic-googlemaps.slack.com/archives/C6GPZEHBP/p1502246843779310

[ThorvaldAagaard]

I have a running version based on the https://github.com/wf9a5m75/ionic-native/tree/f334cc70b94f0944a17485f0676093304e843464

and do the following to update to latest version

D:\Dokumenter\GitHub\gmap\ionic-native>git checkout dev
Previous HEAD position was f334cc7... Add: AnimateCameraOption.padding is missing
Switched to branch 'dev'
Your branch is up-to-date with 'origin/dev'.

D:\Dokumenter\GitHub\gmap\ionic-native>npm run build

the switched to the demo-project

npm uninstall @ionic-native/core @ionic-native/google-maps

npm install (path to)/ionic-native/dist/\@ionic-native/core --no-fetch

npm install (path to)/ionic-native/dist/\@ionic-native/google-maps --no-fetch

Install and run the demo app on my phone. Click on Map and animateCamera(), and get this error

Do I need to update the cordova-plugin ?

[wf9a5m75]

I'm not sure which version of the maps plugin do you use, but as I announced in the slack channel, you need to update the plugin.

Because I changed the internal event names of @ionic-native/google-maps plugin.

[ThorvaldAagaard]

I misunderstood that message, but have installed the latest multiple maps version and I am now getting the events. :-)

Closing

[wf9a5m75]

Ok