few weeks ago I had a problem with the Google maps ionic native module, and I made a question (not solved).
Now I'm testing in a blank page and the map is shown, but it looks like:
This is my xml file, where I have the div that will contain the Map.
<ion-header>
<ion-navbar>
<ion-title>maptest</ion-title>
</ion-navbar>
</ion-header>
<ion-content style="background: pink;">
<div #map id="map" style="height: 80%;"></div>
</ion-content>
And here we have the ts file. Here I create the Map using ViewChild
import { Component, ViewChild, ElementRef } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {
GoogleMaps,
GoogleMap,
CameraPosition,
LatLng,
GoogleMapsEvent,
GoogleMapOptions
} from '#ionic-native/google-maps';
/**
* Generated class for the MaptestPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-maptest',
templateUrl: 'maptest.html',
})
export class MaptestPage {
#ViewChild('map') mapElement: ElementRef;
map: GoogleMap;
constructor(public navCtrl: NavController, public navParams: NavParams, private _googleMaps: GoogleMaps) {
}
ngAfterViewInit() {
console.log('ngAfterViewInit');
this.initMap();
}
initMap() {
let element = this.mapElement.nativeElement;
this.map = GoogleMaps.create(element, {});//this._googleMaps.create(element);
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
console.log('Map is ready!');
}).catch( err =>{
console.error("Error maperino --> "+err);
});
}
moveCamera(location: LatLng) {
let options = {
target: location,
zoom: 18,
tilt: 30
}
this.map.moveCamera(options);
}
}
I don't know what I'm doing wrong :(
Since you can see the google logo, your code is fine.
The problem is your api key.
You need to try to regenerate the API key, and reinstall it.
Make sure you enable the google maps android api v2 and the google maps sdk for ios before generating the api keys.
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md
Even you tried the steps, and but you still get the gray map, contact to me directly. I will check it.
Its an answer, because I don't have reputation to add a comment.
Try add the Platform provider and then use platform ready inside the constructor to initialize your map.
contructor(public navCtrl: NavController,
public navParams: NavParams,
private _googleMaps: GoogleMaps,
private _platform: Platform){
this.platform.ready().then(() => {
this.initMap();
});
}
EDIT: It may be zoom too, try zoom out
EDIT2: Take a look at this slide about ionic and google-maps native
https://docs.google.com/presentation/d/1zlkmoSY4AzDJc_P4IqWLnzct41IqHyzGkLeyhlAxMDE/edit#slide=id.g292c767148_0_47
Related
I'm having trouble with Ionic 3, specifically setting the app background color when using the native Google Maps plugin. The map is a native element "under" the browser, and having background color set for the Ionic app covers the map and prevents it from showing.
When looking at the docs, there is a setBackgroundColor(color) method in the Environment class, but I have no idea where I'm supposed to use that class. Does anyone know?
Ok, I simply instantiated the Environment class and then called setBackgroundColor. Like this:
import { Environment } from '#ionic-native/google-maps`;
export class MyClass {
environment: Environment = null;
myMethod(): void {
this.environment = new Environment();
this.environment.setBackgroundColor("red");
}
}
Wow. It's kind of surprised for me. #mkkekkonen's answer worked certainly, but it is not my intended design way.
(I'm the author of cordova-plugin-googlemaps, and main maintainer of #ionic-native/google-maps plugin).
The Environment, Geocoder, Spherical, Poly(oh, not implemented yet), and Encoding classes are static class in original plugin.
For example, I think nobody do like this, but it is possible.
This is not my intended way.
import { Environment } from '#ionic-native/google-maps`;
export class MyClass {
environment: Environment = null;
myMethod1(): void {
(new Environment()).setBackgroundColor("red");
}
myMethod2(): void {
(new Environment()).setBackgroundColor("blue");
}
}
The correct way is to use provider (#4.3.3)
#IonicPage()
#Component({
selector: 'page-set-background-color',
templateUrl: 'set-background-color.html',
providers: [
Environment
]
})
export class SetBackgroundColorPage {
map: GoogleMap;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public environment: Environment,
public googleMaps: GoogleMaps) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SetBackgroundColorPage');
this.map = this.googleMaps.create('map_canvas');
this.environment.setBackgroundColor('red');
}
}
Please use this way, mkkekkonen.
I will fix this bug in the next release.
update
In the next release after #ionic-native#4.3.4, the code would be like this:
#IonicPage()
#Component({
selector: 'page-set-background-color',
templateUrl: 'set-background-color.html'
})
export class SetBackgroundColorPage {
map: GoogleMap;
constructor() {
}
ionViewDidLoad() {
console.log('ionViewDidLoad SetBackgroundColorPage');
this.map = GoogleMaps.create('map_canvas');
Environment.setBackgroundColor('red');
}
}
I'm working on an Ionic 2 project and I'm using a component called "offre".
I have got a problem running this component. It works correctly in the home page but not in the views (check this picture to see the error)
The data from firebase shown correctly in home.html but not in the other views!
Any suggestions?
Offre.ts code:
import { Component } from '#angular/core';
import { AngularFireDatabase, FirebaseListObservable } from "angularfire2/database";
import { IonicPage, NavController, NavParams} from 'ionic-angular';
import { NativeStorage } from '#ionic-native/native-storage';
#Component({
selector: 'offre',
templateUrl: 'offre.html'
})
export class OffreComponent {
text: string;
datas: FirebaseListObservable<any>;
user : any ;
constructor(public navCtrl: NavController, public db: AngularFireDatabase, public nativeStorage: NativeStorage) {
this.datas=db.list('/posts');
console.log('Hello OffreComponent Component');
}
I'm trying to use an HTML5 canvas for animation in my Ionic 2 app. For this, I have to use window.requestAnimationFrame() to animate my canvas. This is my code:
import { Component, ViewChild, Renderer } from '#angular/core';
import { Platform } from 'ionic-angular';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
...
export class CubePage {
#ViewChild('glCanvas') canvas: any;
canvasElement: any;
ctx: any;
radius: number;
leftBallX: number;
leftBallY: number;
rightBallX: number;
rightBallY: number;
constructor(public navCtrl: NavController, public navParams: NavParams, public renderer: Renderer, public platform: Platform) {
}
ngAfterViewInit() {
console.log(this.canvas);
this.radius = 25;
this.canvasElement = this.canvas.nativeElement;
this.renderer.setElementAttribute(this.canvasElement, 'width', this.platform.width() + "");
this.renderer.setElementAttribute(this.canvasElement, 'height', this.platform.height() + "");
this.ctx = this.canvasElement.getContext('2d');
this.leftBallX = 5;
this.leftBallY = 5;
window.requestAnimationFrame(this.cycle);
}
cycle() {
if (this.leftBallX < this.platform.width() / 2) {
this.ctx.clearRect(0, 0, this.platform.width(), this.platform.height());
this.drawCenterLine();
this.updateLeftBall(this.leftBallX + 5, this.leftBallY);
this.drawLeftBall();
}
window.requestAnimationFrame(this.cycle);
}
...
}
It gives the runtime error Cannot read property 'leftBallX' of undefined when I load the application in my web browser. However, when I eliminate the window.requestAnimationFrame(this.cycle) lines, replacing the first with this.cycle(), there are no errors. Is there a problem with using window in Ionic/Angular?
To solve your problem, first, you need to understand this context when you call a javascript function. Lets see the example:
foo = 0;
ngAfterViewInit(){
let self = this;
//way #1
setTimeout(function(){
console.log(this.foo); //undefinded; because this != self;
},1000);
//way #2
setTimeout(()=>{
console.log(this.foo); //0; because this == self;
},1000)
}
When you call function by way #1, javascript re-bind this object, so you can not find foo propertive in this.
When you call function by way #2 (arrow function), javascript does not re-bind this object, so you can use this as expected.
Now you can solve your problem by using arrow function:
requestAnimationFrame(()=>{this.cycle()})
See more about arrow function
I have an image element that I am trying to use ViewChild with:
<img class="postimage" #imagey [src]="">
My controller is this:
import { Component, ViewChild, ElementRef, Renderer } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the PostpagePage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-postpage',
templateUrl: 'postpage.html',
})
export class PostpagePage {
#ViewChild('imagey') image:ElementRef;
imageHolder;
constructor(public myrenderer: Renderer, public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
this.imageHolder = this.navParams.get("path");
this.myrenderer.setElementAttribute(this.image.nativeElement, 'src', this.imageHolder);
console.log(JSON.stringify(this.image));
}
pushPage(){
// push another page on to the navigation stack
// causing the nav controller to transition to the new page
// optional data can also be passed to the pushed page.
//this.navCtrl.push(SignUpPage);
}
}
The result of the console message in ionViewDidLoad is:
{"nativeElement":{}}
It doesn't seem to be returning an element.
I had to remove the ion-item that was containing the image - then it worked. It is actually still loggin an empty object to the console.
I'm trying to open ListPage from a button in my Google Maps marker.
1)
import { NavController, NavParams } from 'ionic-angular';
2)
constructor(public connectivityService: Connectivity, public navCtrl: NavController) {
}
3)
infowindow.setContent('<button style="font-size: 1.5em; color: red; font-weight: bold;" ion-button (click)="showlistPage()">ADD BLOOD</button>' + "</br>" + results[1].formatted_address+'<p style="color: red;">'+distanceToYou+" miles from your location</p>");
5)
showlistPage() {
this.navCtrl.push(ListPage);
}
but now I'm getting this error: homepage caused by no provider for navcontroller
Try to place the service Connectivity in your app.module as provider, and do not forget to import it in your Component
import { NavController, NavParams } from 'ionic-angular'; // app.module.ts file
At the bottom of the app.module.ts file add below code.
providers: [NavController,{provide: ErrorHandler, useClass: IonicErrorHandler}]
Eventhough It's a bad practice I tried to access a page from a service (that is Google Maps in this situation)
import {NavController, App} from "ionic-angular";
.....
#Injectable()
export class GoogleMaps {
private nav:NavController;
.....
constructor(public connectivityService: Connectivity, private app:App) {
this.nav = app.getActiveNav();
}
.....
//in my Google Maps Marker I defined the button
infowindow.setContent('<button style="font-size: 1.5em; color: red; font-weight: bold;" ion-button (click)="showlistPage()">ADD BLOOD</button>' + "</br>" + results[1].formatted_address+'<p style="color: red;">'+distanceToYou+" miles from your location</p>");
.....
showlistPage() {
this.nav.push(ListPage);
}
I still can't access the ListPage from that button, but atleast I solved the error.