Comments (31)
I hate git :-)
from ionic-googlemaps-demo.
Could you show me whole code?
from ionic-googlemaps-demo.
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
from ionic-googlemaps-demo.
Oh,...
from ionic-googlemaps-demo.
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.
from ionic-googlemaps-demo.
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/
from ionic-googlemaps-demo.
ping
from ionic-googlemaps-demo.
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
from ionic-googlemaps-demo.
Did you build @ionic-native/core
, @ionic-native/google-maps
, then reinstall them with the latest version of the plugin?
from ionic-googlemaps-demo.
I followed your instructions exactly
from ionic-googlemaps-demo.
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?
from ionic-googlemaps-demo.
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
from ionic-googlemaps-demo.
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
from ionic-googlemaps-demo.
Seems that the statements
$> npm run build:core
$> npm run build:modules google-maps
isn't building my local version
from ionic-googlemaps-demo.
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.
from ionic-googlemaps-demo.
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
from ionic-googlemaps-demo.
Maybe git pull
?
from ionic-googlemaps-demo.
I can see the right code i /src. But I will make a new clone
from ionic-googlemaps-demo.
@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
from ionic-googlemaps-demo.
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
from ionic-googlemaps-demo.
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.
from ionic-googlemaps-demo.
Did you face any errors during the local install?
from ionic-googlemaps-demo.
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
from ionic-googlemaps-demo.
Why do you stick on the commit #00bbbe6dca ?
from ionic-googlemaps-demo.
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
from ionic-googlemaps-demo.
Did you reinstall the maps plugin?
from ionic-googlemaps-demo.
https://ionic-googlemaps.slack.com/archives/C6GPZEHBP/p1502246843779310
from ionic-googlemaps-demo.
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 ?
from ionic-googlemaps-demo.
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.
from ionic-googlemaps-demo.
I misunderstood that message, but have installed the latest multiple maps version and I am now getting the events. :-)
Closing
from ionic-googlemaps-demo.
Ok
from ionic-googlemaps-demo.
Related Issues (7)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-googlemaps-demo.