Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 228653 articles
Browse latest View live

Ionic native google maps not displayed browser and app

$
0
0

Hello guys, I have this code :

import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker,
Environment
} from '@ionic-native/google-maps';

import { Platform } from '@ionic/angular';

export class MapComponent implements OnInit, AfterViewInit {
map: GoogleMap;

constructor(
    private platform: Platform
) {
    this.platform.ready().then(() => {
        console.log('Constructor');
        this.loadMap();
    });
}


loadMap() {
    // This code is necessary for browser
    Environment.setEnv({
        API_KEY_FOR_BROWSER_RELEASE: 'API_SECRET',
        API_KEY_FOR_BROWSER_DEBUG: 'API_SECRET'
    });

    const mapOptions: GoogleMapOptions = {
        camera: {
            target: {
                lat: 43.0741904,
                lng: -89.3809802
            },
            zoom: 18,
            tilt: 30
        }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);
    console.log('load 4');
    const marker: Marker = this.map.addMarkerSync({
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: {
            lat: 43.0741904,
            lng: -89.3809802
        }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
        alert('clicked');
    });
}

In html I have :

<ion-content>
    <div id="map_canvas"></div>
</ion-content>

I have the error :

ncaught (in promise): TypeError: GoogleMaps.getPlugin(…) is null
./node_modules/@ionic-native/google-maps/index.js/Environment.setEnv@http://187.2.0.2:8100 /vendor.js:100276:20

I use this lib : https://github.com/ionic-team/ionic-native-google-maps/blob/d7898d7a58940a9eb478ee4a1ef5d3d431db9e25/documents/README.md

I found some answers on stackoverflow but didn’t help me. Thx in advance.

You can find all the content of component.


Ionic native google maps not displayed browser and app

$
0
0

Seems like the Google Maps Plugin isn’t installed correctly. Can you please post the Result of:
ionic cordova plugin list

ERROR Error: "Uncaught (in promise): Error: Cannot find module

$
0
0

Hello, I’ve been having troubles opening my default path in ionic. It opens sometimes but must times it does not.
I usually get an error: "ERROR Error: “Uncaught (in promise): Error: Cannot find module ‘…/home/home.module’”
Here is my app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
  },
  { path: 'about', loadChildren: './pages/about/about.module#AboutPageModule' },
  { path: 'credit', loadChildren: './pages/credit/credit.module#CreditPageModule' },
  { path: 'contact', loadChildren: './pages/contact/contact.module#ContactPageModule' },

];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Here is my tab routing module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      { path: 'home', loadChildren: '../home/home.module#HomePageModule' },
      { path: 'mobile', loadChildren: '../mobile/mobile.module#MobilePageModule' },
      { path: 'bank', loadChildren: '../bank/bank.module#BankPageModule' },
      { path: 'tv', loadChildren: '../tv/tv.module#TvPageModule' },
      { path: 'global', loadChildren: '../global/global.module#GlobalPageModule' },
      { path: 'utility', loadChildren: '../utility/utility.module#UtilityPageModule' },
    ]
  },
  { path: '', redirectTo: 'tabs/home', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

I’ve searched lots of forums to solved it, but I’ve not found a solution because the page loads sometimes and it just remains blank most time after running “ionic serve”.
What can I do to solve this. Thank you.

Ionic native google maps not displayed browser and app

$
0
0
call-number 0.0.2 "Cordova Call Number Plugin"
cordova-plugin-advanced-http 2.4.0 "Advanced HTTP plugin"
cordova-plugin-androidx 1.0.2 "cordova-plugin-androidx"
cordova-plugin-androidx-adapter 1.1.0 "cordova-plugin-androidx-adapter"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-brightness 0.1.5 "Brightness"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-fingerprint-aio 2.0.0 "FingerprintAllInOne"
cordova-plugin-firebase-analytics 4.0.1 "FirebaseAnalyticsPlugin"
cordova-plugin-firebase-crashlytics 1.0.0 "Cordova Firebase Crashlytics Plugin"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-nativestorage 2.3.2 "NativeStorage"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-plugin-x-socialsharing 5.0.12 "SocialSharing"
cordova-support-android-plugin 1.0.1 "cordova-support-android-plugin"
cordova-support-google-services 1.3.2 "cordova-support-google-services"

Ionic native google maps not displayed browser and app

Vertically align center for a ion-card

$
0
0

Not Work For me, but this code work…
in file.scss

.login-box-centered {
transform: translateY(-50%);
top: 50%;
height: 40%;
left: 2.5%;
right: 2.5%;
position: absolute;
width: 95%;
}

in file.html

title

card content

Ionic native google maps not displayed browser and app

Slider using html css and typescript no ionic or angular component

$
0
0

Hello,

If you check the ionic documentation you will find an example of how the slides component is used, here is the link of the official documentation


Ionic native google maps not displayed browser and app

$
0
0

For Ionic 4 you have to look at this: https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4

$> ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps

$> npm install @ionic-native/core@beta @ionic-native/google-maps@beta --save

You have to import the GoogleMaps stuff from @ionic-native/google-maps/ngx then

Ionic native google maps not displayed browser and app

How to use one native function on multiple pages

$
0
0

Hi, I’m trying to use native features such as ‘social share’ and ‘call number https://ionicframework.com/docs/native/call-number’ on multiple pages. I can successfully put the code of a pages’s TS file then I can only use it on that particular page.

How do I add this native code in a general ts file and still call it on multiple pages? I’ve searched for tutorials and guides on this but I don’t seem to get the proper way this can be done.

I also asked this question on reddit sometime ago:https://www.reddit.com/r/ionic/comments/ecelza/how_to_use_one_native_function_on_multiple_pages/

I was told to create a custom service file but I don’t seem to know how to do this right. In which directory do I put this service file and how do I call it on other pages? I created a service directory in the app directory and created a custom service.ts file. here is what it looks like:

import { Injectable } from '@angular/core';
import { NgModule } from '@angular/core';
import { AppModule } from '../app.module';

import { CallNumber } from '@ionic-native/call-number/ngx';
import { Clipboard } from '@ionic-native/clipboard/ngx';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';


@Injectable({
  providedIn: 'root'
})


export class UssdactionService {

  constructor(private callNumber: CallNumber,
              private clipboard: Clipboard,
              private socialSharing: SocialSharing) { }


  callNow(number) {
    this.callNumber.callNumber(number, true)
      .then(res => console.log('Launched dialer!', res))
      .catch(err => console.log('Error launching dialer', err));
  }

  copyText(number){
    this.clipboard.copy(number);
    alert("copied");
  }

  share(number){
    this.socialSharing.share(number);
  }

}

I have to submit a demo in 2 days, is there any clear guide or tutorials on how to implement and reuse native plugins on multiple pages?. Thanks.

Ionic native google maps not displayed browser and app

$
0
0

How did you test it in Browser? Ionic serve?

I can remeber that a grey screen appears when the Key is invalid but i’m not sure. Can you check my above answer?

Ionic native google maps not displayed browser and app

$
0
0

I test browser : ng serve --watch
I don’t want to use beta, is a unstable version :frowning:

How to use one native function on multiple pages

$
0
0

First: This is not really a Native Plugin reuse topic. It is a general Code reusing Topic and a Service is the correct answer for it. You can read about services here: https://angular.io/tutorial/toh-pt4

I’m not sure if there is file structure defined, for where there should be saved, i don’t think so. In my projects i have this structure:

  /app
    /shared
      /components
      /services
        call-number.service
      /directives
      /pipes
      ...
  app.component-html
  ...

So i have a shared Folder for all the shared code, like Components, Pipes and Services.

Second: I don’t think it is a good idea to create a Service for all Native Plugin stuff. So basically why so you need a Function around the callNumber Function? Why don’t you call this Function directly where you need it? @ionic/native is a Wrapper Service! Creating a own is only useful if you have some additional logic.

Ionic native google maps not displayed browser and app

$
0
0

with ng serve “cordova” is not available. Try ionic cordova build browser


Ionic native google maps not displayed browser and app

Ionic and HTML5 video tag

$
0
0

Can we hide or disable fullscreen option in the video tag!?
Any suggestion?

Is there a way to allow users to create their own markers on a google maps API?

$
0
0

I am attempting to make a fishing location map. That will allow logged-in users to add in their own fishing locations to the map. My hope to do this is through a button which will pop up a page that will allow them to fill out information on the location and through Longitude + Latitude display it to the map which then you can click on the new icon on the map and it will bring the user to the detailed page of information that was filled out. This is a mock-up design I made for a better idea of what it would look like.

Creation Page: https://imgur.com/m7FBxhe
View Page: https://imgur.com/kvlhYUz

I am wondering is this possible to do? I am struggling to find any resources that could be of help with Ionic for doing something like this. I am going to be using a firebase database for the user registration/login. I am not the most experienced when it comes to any of this if I will be able to use firebase to store icon information? Or am I better off using something like SQL Lite? and in general, is this possible to do with Ionic/Angular?

Explicitly specify a type for created components in ionic 4

$
0
0

The answer does appear to be “no” unless an interface has been explicitly written/exposed

…because?

Ionic native google maps not displayed browser and app

$
0
0

Any ideas of what the screen is grey ?

Viewing all 228653 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>