@Nikhil94dhar wrote:

my code is

 const options: DocumentViewerOptions = {
      title: 'My PDF'
    }
    this.document.viewDocument('assets/help_guide.pdf', 'application/pdf', options)

and error I am getting is

[17:37:25]  error opening ws message: {"category":"console","type":"log","data":["Error in
            SitewaertsDocumentViewer.canViewDocument(): ",{"status":9,"message":"Relative URIs are not
            supported.","details":"java.lang.IllegalArgumentException: Relative URIs are not supported.\n\tat
            org.apache.cordova.CordovaResourceApi.assertNonRelative(CordovaResourceApi.java:452)\n\tat
            org.apache.cordova.CordovaResourceApi.getUriType(CordovaResourceApi.java:105)\n\tat
            org.apache.cordova.CordovaResourceApi.mapUriToFile(CordovaResourceApi.java:150)\n\tat
            de.sitewaerts.cordova.documentviewer.DocumentViewerPlugin.getFileNew(DocumentViewerPlugin.java:852)\n\tat
            de.sitewaerts.cordova.documentviewer.DocumentViewerPlugin.getFile(DocumentViewerPlugin.java:842)\n\tat
            de.sitewaerts.cordova.documentviewer.DocumentViewerPlugin.canGetFile(DocumentViewerPlugin.java:679)\n\tat
            de.sitewaerts.cordova.documentviewer.DocumentViewerPlugin.doExecute(DocumentViewerPlugin.java:352)\n\tat
            de.sitewaerts.cordova.documentviewer.DocumentViewerPlugin.access$000(DocumentViewerPlugin.java:49)\n\tat
            de.sitewaerts.cordova.documentviewer.DocumentViewerPlugin$1.run(DocumentViewerPlugin.java:185)\n\tat
            java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1133)\n\tat
            java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:607)\n\tat
            java.lang.Thread.run(Thread.java:761)\n"}]}
[17:37:25]  console.error: Error in SitewaertsDocumentViewer.viewDocument():

Posts: 1

Participants: 1

Read full topic

@jylikorpi wrote:

I have an html5 video that plays in full screen automatically and it’s working fine, but if I don’t use or don’t want to use crosswalk plugin, the default html5 video play button will appear on top of the video for a second when video starts to play. Is there way to get rid of that without crosswalk? I have tried everything and googled for hours.

I would very much prefer not to use crosswalk plugin just for this one thing because of the high footprint of crosswalk.

Posts: 1

Participants: 1

Read full topic

@paulisaris wrote:

Hi,

When I run

ionic cordova platform add android

I get the following output:

$ ionic cordova platform add android
> cordova platform add android --save
Using cordova-fetch for cordova-android@~6.3.0

Error: Failed to fetch platform cordova-android@~6.3.0
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: npm: Command failed with exit code 1 Error output:
npm ERR! Linux 3.13.0-77-generic
npm ERR! argv "/home/pisaris/.nvm/versions/node/v6.11.4/bin/node" "/home/pisaris/projects/batler.io_new/batler.io/node_modules/.bin/npm" "install" "cordova-android@~6.3.0" "--production" "--save-exact"
npm ERR! node v6.11.4
npm ERR! npm  v2.15.12
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package @ionic-native/core@3.14.0 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @ionic-native/app-rate@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/camera@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/device@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/file@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/file-path@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/in-app-browser@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/keyboard@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/local-notifications@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/native-page-transitions@4.4.2 wants @ionic-native/core@^4.2.0
npm ERR! peerinvalid Peer @ionic-native/native-storage@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/network@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/onesignal@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/screen-orientation@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/social-sharing@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/splash-screen@3.7.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/status-bar@3.7.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/toast@3.14.0 wants @ionic-native/core@^3.6.0
npm ERR! peerinvalid Peer @ionic-native/transfer@3.14.0 wants @ionic-native/core@^3.6.0

However, my package.json is as following:

{
  "name": "io.batler.sgl",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/compiler-cli": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/platform-browser-dynamic": "4.1.0",
    "@ionic-native/app-rate": "3.14.0",
    "@ionic-native/camera": "3.14.0",
    "@ionic-native/core": "3.14.0",
    "@ionic-native/device": "3.14.0",
    "@ionic-native/file": "3.14.0",
    "@ionic-native/file-path": "3.14.0",
    "@ionic-native/in-app-browser": "3.14.0",
    "@ionic-native/keyboard": "3.14.0",
    "@ionic-native/local-notifications": "3.14.0",
    "@ionic-native/native-page-transitions": "4.4.2",
    "@ionic-native/native-storage": "3.14.0",
    "@ionic-native/network": "3.14.0",
    "@ionic-native/onesignal": "3.14.0",
    "@ionic-native/screen-orientation": "3.14.0",
    "@ionic-native/social-sharing": "3.14.0",
    "@ionic-native/splash-screen": "3.7.0",
    "@ionic-native/status-bar": "3.7.0",
    "@ionic-native/toast": "^3.10.3",
    "@ionic-native/transfer": "^3.6.1",
    "@ionic/app-scripts": "3.0.1",
    "@ionic/storage": "2.0.1",
    "com.telerik.plugins.nativepagetransitions": "^0.6.5",
    "com.unarin.cordova.beacon": "^3.5.2",
    "cordova-ios": "~4.5.3",
    "cordova-plugin-app-event": "^1.2.1",
    "cordova-plugin-apprate": "^1.3.0",
    "cordova-plugin-camera": "^2.4.1",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-crosswalk-webview": "^2.3.0",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-dialogs": "^1.3.4",
    "cordova-plugin-email": "^1.2.6",
    "cordova-plugin-email-composer": "^0.8.11",
    "cordova-plugin-file": "^5.0.0",
    "cordova-plugin-file-transfer": "^1.7.0",
    "cordova-plugin-filepath": "^1.1.0",
    "cordova-plugin-globalization": "^1.0.8",
    "cordova-plugin-inappbrowser": "^1.7.2",
    "cordova-plugin-nativestorage": "^2.2.2",
    "cordova-plugin-network-information": "^1.3.4",
    "cordova-plugin-screen-orientation": "^2.0.2",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-statusbar": "^2.3.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.2.1",
    "cordova-plugin-x-toast": "^2.6.0",
    "cordova-sqlite-storage": "^2.1.2",
    "cordova-uglify": "^0.2.9",
    "de.appplant.cordova.plugin.local-notification": "^0.8.5",
    "es6-promise-plugin": "^4.1.1",
    "hammerjs": "^2.0.8",
    "intl": "^1.2.5",
    "ionic": "^3.4.0",
    "ionic-angular": "3.2.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "localforage": "^1.5.0",
    "localforage-cordovasqlitedriver": "^1.6.0",
    "onesignal-cordova-plugin": "^2.2.2",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.1.1",
    "setimmediate": "^1.0.5",
    "sw-toolbox": "3.6.0",
    "uglify-js": "^3.1.3",
    "web-animations-js": "^2.2.5",
    "woocommerce-api": "^1.4.2",
    "wpapi": "^1.1.2",
    "zone.js": "0.8.10"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.0",
    "@types/hammerjs": "^2.0.35",
    "crypto-js": "^3.1.9-1",
    "ionic": "3.18.0",
    "typescript": "^2.3.4"
  },
  "description": "batler.io: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordova": {
    "plugins": {
      "com.unarin.cordova.beacon": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": " ",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-filepath": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-nativestorage": {},
      "cordova-sqlite-storage": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-crosswalk-webview": {
        "XWALK_VERSION": "23+",
        "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
        "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
        "XWALK_MODE": "embedded",
        "XWALK_MULTIPLEAPK": "true"
      },
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-x-socialsharing": {},
      "de.appplant.cordova.plugin.local-notification": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-email": {},
      "cordova-plugin-device": {},
      "cordova-plugin-apprate": {},
      "onesignal-cordova-plugin": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-email-composer": {},
      "cordova-plugin-file": {},
      "com.telerik.plugins.nativepagetransitions": {}
    },
    "platforms": [
      "ios"
    ]
  }
}

ionic info:

$ ionic info

cli packages: (/home/pisaris/projects/batler.io_new/batler.io/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.2.1

System:

    Android SDK Tools : 26.1.1
    Node              : v6.11.4
    npm               : 2.15.12
    OS                : Linux 3.13

Environment Variables:

    ANDROID_HOME : /home/pisaris/Android/Sdk

Misc:

    backend : legacy

Also, when I run

npm outdated

I get the following output:

Package                            Current  Wanted  Latest  Location
@ionic/app-scripts                   3.0.1   3.0.1   3.1.2  io.batler.sgl
@angular/common                      4.1.0   4.1.0   5.0.3  io.batler.sgl
@angular/compiler                    4.1.0   4.1.0   5.0.3  io.batler.sgl
@angular/compiler-cli                4.1.0   4.1.0   5.0.3  io.batler.sgl
@angular/core                        4.1.0   4.1.0   5.0.3  io.batler.sgl
@angular/forms                       4.1.0   4.1.0   5.0.3  io.batler.sgl
@angular/http                        4.1.0   4.1.0   5.0.3  io.batler.sgl
@angular/platform-browser            4.1.0   4.1.0   5.0.3  io.batler.sgl
@angular/platform-browser-dynamic    4.1.0   4.1.0   5.0.3  io.batler.sgl
@ionic-native/app-rate              3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/camera                3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/core                  3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/device                3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/file                  3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/file-path             3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/in-app-browser        3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/keyboard              3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/local-notifications   3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/native-storage        3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/network               3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/onesignal             3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/screen-orientation    3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/social-sharing        3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic-native/splash-screen          3.7.0   3.7.0   4.4.2  io.batler.sgl
@ionic-native/status-bar             3.7.0   3.7.0   4.4.2  io.batler.sgl
@ionic-native/toast                 3.14.0  3.14.0   4.4.2  io.batler.sgl
@ionic/app-scripts                   3.0.1   3.0.1   3.1.2  io.batler.sgl
@ionic/storage                       2.0.1   2.0.1   2.1.3  io.batler.sgl
cordova-plugin-camera                2.4.1   2.4.1   3.0.0  io.batler.sgl
cordova-uglify                       0.2.9   0.2.9   0.3.0  io.batler.sgl
ionic-angular                        3.2.1   3.2.1   3.9.2  io.batler.sgl
rxjs                                 5.1.1   5.1.1   5.5.2  io.batler.sgl
zone.js                             0.8.10  0.8.10  0.8.18  io.batler.sgl

Any ideas about what is going on?
Thanks in advance

Posts: 7

Participants: 3

Read full topic

@akhilsanker94 wrote:

Hi community,

Trouble with loading contents of local storage[ @ionic/storage].Taking time to load the contents from the storage in devices but fine with ionic serve.
I have about 10 keys in my local storage.
Any idea about this issue.

Thanks,

Posts: 1

Participants: 1

Read full topic

@mcihak wrote:

Hi all,
can you please tell me how is possible to redirect to specific page after clicking on notification if app is in background or if cold start of app? I am using push plugin.

My code in app.component.ts in platform.ready function:

pushObject.on('notification').subscribe((notification: any) => {
            console.log('Received a notification', notification)
            if (notification.additionalData.foreground) {
                // if application open, show popup
                let notifAlert = this.alertCtrl.create({
                    title: notification.title,
                    message: notification.message,
                    cssClass: "notification",
                    buttons: [{
                        text: 'View',
                        role: 'cancel',
                        handler: () => {
                            //TODO: Your logic here
                            console.log("click alert")
                            if (notification.additionalData.key_code == "new_message") {
                                this.nav.push(MessagesPublicPage);
                            }
                        }
                    }]
                });
                notifAlert.present();

                setTimeout(function () {
                    notifAlert.dismiss()
                }, 5000);

            } else {
                //if user NOT using app and push notification comes - NOT working, redirect to default rootPage
                /if (notification.additionalData.key_code == "new_message") {
                     this.rootPage = MessagesPublicPage;
                 }
                console.log("Push notification clicked");
            }
        });

Thanks a lot

Posts: 2

Participants: 2

Read full topic

@bathach95 wrote:

I am using ion-refresher but it does not show content inside ion-refresher-content tag.
Here is my code:
home.html:

<ion-header>
    <ion-navbar>
        <ion-title>
            Home
        </ion-title>

        <ion-buttons end>
            <button color="danger" ion-button (click)="logout()">
                Logout
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content padding id="page3">
    <div>
        <button (click)="scan()" round type="submit" id="login-button2" ion-button block class="btn">
            Scan QR Code To Add New Device
        </button>
    </div>
    <div id="home-heading3">
        Your devices
    </div>
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content
            pullingIcon="arrow-dropdown"
            pullingText="Pull to refresh"
            refreshingSpinner="circles"
            refreshingText="Refreshing...">
            <h1>heeheheh</h1> <!-- this line does not show -->
        </ion-refresher-content>
    </ion-refresher>


</ion-content>

home.ts

doRefresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }

Posts: 1

Participants: 1

Read full topic

@RamyHakam wrote:

I have one simple question i am vary new to Ionic
How I can use HTML5 Geolocation to get the device location without GPS enabled
if i use geolocaiton API from browser its request permission from the user and its work without open GPS
How I can do that in my app and if i add Location permission to my app Can I run the script without the permission popup

Posts: 1

Participants: 1

Read full topic

@nithinmathew1 wrote:

Hi,
I need to restrict the entry to Alphabets, Numbers and Spaces in Ion input field. We tried capturing key press events and tried using patterns as below

keyUpChecker(ev) {
let elementChecker: string;
let format = /^[a-z0-9 ]*$/i;
elementChecker = ev.target.value;
console.log(ev.target.value);
if(!format.test(elementChecker)){
this.vesselName = elementChecker.slice(0, -1);
}
}

And in HTML as

<ion-input type=“text” maxlength="50"
onpaste=“return false;”
(keyup)="keyUpChecker($event)"
placeholder=“Enter Name”
[(ngModel)]=“vesselName”>

But, we still are able to change the cursor position and enter special characters

Posts: 1

Participants: 1

Read full topic

@desjardinsy wrote:

When calling a ModalController, I am passing an object which has 2 fields of type Date. However on the receiving end when I get the params, the object returned has strings in the dates instead of Date objects. This is causing a lot of confusion, especially because of the time zones. Anyone else has this issue and a clean solution?

Posts: 1

Participants: 1

Read full topic

@jfan29 wrote:

So my Lead developer told me it’s a bad design that I’m using “mypage” as a string, if someone else renamed the actual mypage file, the app would break.

Is “mypage” as string the only way to maintain lazy loading

this.nav.push("mypage");

Posts: 2

Participants: 1

Read full topic

@imrvshah wrote:

I am getting a weird error for the build command in android.

error says

What went wrong:
Failed to create component for 'dialog' reason: java.awt.HeadlessException
> java.awt.HeadlessException (no error message)

cordova.gradle

def doPromptForPassword(msg) {
    if (System.console() == null) {
        def ret = null
        new SwingBuilder().edt {
            dialog(modal: true, title: 'Enter password', alwaysOnTop: true, resizable: false, locationRelativeTo: null, pack: true, show: true) {
                vbox {
                    label(text: msg)
                    def input = passwordField()
                    button(defaultButton: true, text: 'OK', actionPerformed: {
                        ret = input.password;
                        dispose();
                    })
                }
            }
        }
        if (!ret) {
            throw new GradleException('User canceled build')
        }
        return new String(ret)
    } else {
        return System.console().readPassword('\n' + msg);
    }
}

What I am doing wrong? It was working fine in previous build

Posts: 1

Participants: 1

Read full topic

@viniciustr wrote:

I use Ionic 3.

I run the command ionic cordova build ios --prod with success.
I open my .xcodeproj file with success.

But, when i try to RUN or BUILD my App, Xcode returns “Build Failed” and show to me this image:

0002.jpg960x656 361 KB

I try run ionic cordova platform rm ios and ionic cordova platform add ios, but without success.

Any ideia?

Thanks all.

Posts: 1

Participants: 1

Read full topic

@jamatller wrote:

Hello,

I am making a PWA but my problem is in the web if content extends more than the vertical size of window the vertical scrollbar is not showing.
I am using a ion-split-pane.
I dunno what can be the problem, by default it should show the scrollbar in the web browser right?

Thanks in advance!
Jordi

Posts: 1

Participants: 1

Read full topic

@Reck wrote:

I’ve been looking for a way to have a fade out transition on a single page in my application. This have proven more difficult than I thought.

this.navCtrl.setRoot(LoginPage, {}, {
  animate: true,
  animation: 'wp-transition',
  duration: 200
})

This snippet will actually fade it, but at the same time reduce the size of the page. Looking through the code I found this comment:

The property ‘animation’ understands the following values: md-transition, ios-transition and wp-transition.

So apparently it is not as easy as writing fade, or a small CSS animation. How can I accomplish this?

Posts: 1

Participants: 1

Read full topic

@ayrunschaefer wrote:

Hi just checked in a recent changed, and am egtting failed builds. Had previously built this app OK. This is what I am seeing in the build log. Anyone seen something similar?

error: cache entry has null sha1: relivvitvine

Posts: 1

Participants: 1

Read full topic

@bobnino wrote:

file chooser works fine for all other folders but not gallery!! any thoughts on the issue i used the code on the ionic page

this.fileChooser.open()
.then(uri => console.log(uri))
.catch(e => console.log(e));

Posts: 1

Participants: 1

Read full topic

@ciarangallagher036 wrote:

Hi

I’m building my first Ionic application and I’m looking to implement push notifications in my application. Problem is, I’m a total noob and I have only a basic understanding of push notifications, and on googling this area I’m getting instructions for older versions of Ionic, so I don’t want to dive too deep without getting a better understanding.

My understanding so far is that I should be able to use the Ionic ‘Push’ plugins in my application to subscribe to a service which sends out push notifications.

But my problem is, how do I generate push notifications, and how do I then subscribe to those notifications? I currently have an ASP.NET Web API project hooked up to my Ionic application performing all the server-side logic - I’m assuming it’s here where I can generate my push notifications?

I appreciate all input, even if it’s just providing basic information or linking me to appropriate resources!

Thank you

Posts: 1

Participants: 1

Read full topic

@MrPickles2009 wrote:

Whenever I run ionic serve I keep running into the following error:
process.setMaxListeners is not a function

My app was running perfectly until I attempted to add ion-multi-picker to my app.
After adding this component I got the max listeners error. Even after I removed the component I still received the error.
I even rebuilt the whole app and I still receive this error. My other ionic apps still work fine.
I’ve uninstalled and reinstalled ionic globally.

Any one have any ideas on what may be causing this?

image.png1331x747 102 KB

Posts: 1

Participants: 1

Read full topic

@recoilnetworks wrote:

I am new to Ionic and Angular though I have done fairly well so far. I have Google Maps working and markers populating from my API. Each marker is plotted on the map with an InfoWindow and is also added to an with a couple 's with some data such as created date/time. When a user taps the , I want it to trigger the InfoWindow but I cannot figure out how. Normally, I would use google.maps.event.trigger() however, that doesn’t appear to be working. Any help is appreciated.

track.html

<ion-header>
  <ion-navbar color="dark">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Track</ion-title>
    <ion-buttons end>
      <button ion-button end>
        <ion-icon name="ios-phone-portrait"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="map" id="map"></div>

  <ion-row class="header">
    <ion-col text-center>
      <i class="fa fa-fw fa-clock-o"></i>
    </ion-col>
    <ion-col text-center>
      <i class="fa fa-fw fa-wifi"></i>
    </ion-col>
    <ion-col text-center>
      <strong><i class="fa fa-fw fa-battery-full"></i></strong>
    </ion-col>
    <ion-col text-center>
      <i class="fa fa-fw fa-tachometer"></i>
    </ion-col>
  </ion-row>

  <div class="history">
    <ion-row *ngFor="let l of locations" (click)="openInfoWindow(l.id)">
      <ion-col text-center>{{l.created}}</ion-col>
      <ion-col text-center>{{l.accuracy}}</ion-col>
      <ion-col text-center>100%</ion-col>
      <ion-col text-center>{{l.speed}}</ion-col>
    </ion-row>
  </div>
</ion-content>

track.ts

import { Component } from '@angular/core';
import { AppConfig } from '../../app/app.config';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

declare var google;

@Component({
  selector: 'page-track',
  templateUrl: 'track.html'
})
export class TrackPage {
  private map: any;
  markers: any[] = [];
  locations: any;

  constructor(public navCtrl: NavController, public appConfig: AppConfig, public http: Http) {

  }

  ionViewDidLoad() {
    this.map = null;
    this.initMap();
  }

  initMap() {
    this.map = new google.maps.Map(document.getElementById('map'), {
      mapTypeControl:false,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      zoom: 18,
      panControl:false,
      scaleControl:true,
      zoomControlOptions: {
        position:google.maps.ControlPosition.LEFT_TOP
      },
      streetViewControlOptions:{
        position:google.maps.ControlPosition.TOP_LEFT
      }
    });

    this.loadHistory();
  }

  loadHistory() {
    let bounds = new google.maps.LatLngBounds();

    this.http.get(this.appConfig.apiBaseUrl + '/api/location/1').map(result => result.json()).subscribe(data => {
      this.locations = data;

      for (let location of data) {
        let infowindow = new google.maps.InfoWindow({
          content: '<h4>Location ' + location.id + '</h4>Created: ' + location.created
        });

        let marker = new google.maps.Marker({
          position: new google.maps.LatLng(location.location.lat, location.location.lon),
          map: this.map,
          draggable: false,
          title: location.created,
          zIndex: location.id
        });

        marker.addListener('click', function() {
          infowindow.open(this.map, marker);
        });

        this.markers.push(marker);

        bounds.extend(new google.maps.LatLng(location.location.lat, location.location.lon));
      }

      this.map.fitBounds(bounds);
    });
  }

  openInfoWindow(id) {
    console.log('ID: ' + id);

    this.hideAllInfoWindows();

    google.maps.event.trigger(this.markers[id], 'click');
  }
}

I also want to make sure only one InfoWindow is open at a time.

Thank you!

Posts: 1

Participants: 1

Read full topic

@Willcowd wrote:

Hi all.

I can’t get a subtitle of an action sheet to show on iOS.
I notice the demo doesn’t have one, but should it work?

Thanks
Mark

Posts: 1

Participants: 1

Read full topic