I researched a lot before making this post, trying to find out what or where is the problem, i just cant figure out.
The tag <agm-map> doesnt shows up in form of a map, only in the html, but doesnt render, the google key is valid and tested in many ways, so it is 100% working + set-location.scss has the agm-map{ height: 250px !important; } set correctly. i just cant figure out where is the mistake…
To display the map im using a modal, im trying to reach this modal from here:
form-address.ts
import { SetLocationPage } from './../set-location/set-location';
import { addressInterface } from './../../data/address.interface';
import { NgForm } from '@angular/forms';
import { FormularioService } from './../../services/formulario';
import { NavController, ModalController } from 'ionic-angular';
import { Component } from '@angular/core';
import { FormContactPage } from '../form-contact/form-contact';
@Component({
selector: 'page-form-address',
templateUrl: 'form-address.html',
})
export class FormAddressPage {
address : addressInterface;
region : string;
ciudad : string;
comuna : string;
constructor(public formulario : FormularioService,
public navCtrl : NavController,
private modalCtrl: ModalController){
this.address={
region: "",
ciudad: "",
comuna: "",
calle: "",
numero: 0,
local: 0,
}
this.region = "Metropolitana";
this.ciudad = "Santiago";
this.comuna = "Maipu";
}
submitAddress(form : NgForm){
this.address.region = form.value.region;
this.address.ciudad = form.value.ciudad;
this.address.comuna = form.value.comuna;
this.address.calle = form.value.nombreCalle;
this.address.numero = form.value.numeroCalle;
this.address.local = (form.value.numeroLocal)?form.value.numeroLocal:0;
this.formulario.direccion = this.address;
console.log(this.formulario);
console.log(form);
this.navCtrl.push(FormContactPage);
}
onLocate(){
}
onOpenMap(){
console.log("onOpenMap()");
const modal =this.modalCtrl.create(SetLocationPage);
modal.present();
}
}
From here im calling the function to go to the modal.
set-Location.html
<ion-header>
<ion-navbar>
<ion-title>Escoge una ubicación</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col>
<!-- [latitude]="lat" [longitude]="lng" -->
<agm-map>
</agm-map>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
set-location.ts
import { Component } from '@angular/core';
@Component({
selector: 'page-set-location',
templateUrl: 'set-location.html',
})
export class SetLocationPage {
lat:number = 51.678418;
lng:number = 7.809007;
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { LoginPage } from '../pages/login/login';
import { ProfilePage } from '../pages/profile/profile';
import { FormProfilePage } from '../pages/form-profile/form-profile';
import { FormServicePage } from '../pages/form-service/form-service';
import { FormAddressPage } from '../pages/form-address/form-address';
import { FormContactPage } from '../pages/form-contact/form-contact';
import { FormFinishPage } from '../pages/form-finish/form-finish';
import { FormularioService } from '../services/formulario';
import { SetLocationPage } from './../pages/set-location/set-location';
import { AgmCoreModule } from '@agm/core'
@NgModule({
declarations: [
MyApp,
LoginPage,
ProfilePage,
FormProfilePage,
FormServicePage,
FormAddressPage,
SetLocationPage,
FormContactPage,
FormFinishPage,
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AgmCoreModule.forRoot({
apiKey: 'AIzaSyBaKvpxxxxxxxxx'
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage,
ProfilePage,
FormProfilePage,
FormServicePage,
FormAddressPage,
FormContactPage,
FormFinishPage,
SetLocationPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
FormularioService
]
})
export class AppModule {}
package.json
{
"name": "appPrepago",
"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": {
"@agm/core": "^1.0.0-beta.2",
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/barcode-scanner": "^4.5.3",
"@ionic-native/base64-to-gallery": "^4.5.3",
"@ionic-native/camera": "^4.5.3",
"@ionic-native/core": "^4.4.0",
"@ionic-native/geolocation": "^4.5.3",
"@ionic-native/native-geocoder": "^4.5.3",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic-native/zbar": "^4.5.3",
"@ionic/storage": "2.1.3",
"cordova-base64-to-gallery": "^4.1.3",
"cordova-plugin-camera": "^4.0.2",
"cordova-plugin-cszbar": "^1.3.4",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-nativegeocoder": "^3.0.0",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"phonegap-plugin-barcodescanner": "^7.0.2",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.8",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-camera": {},
"cordova-plugin-cszbar": {},
"cordova-base64-to-gallery": {},
"phonegap-plugin-barcodescanner": {},
"cordova-plugin-nativegeocoder": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
}
}
}
}
