Ionic 3 google maps ViewChild

Ionic Framework ionic-v3
1

Hello!

I am trying to add locations of churches nearby with google maps in my app.

I have been following this guide to display a map: https://codeburst.io/native-google-maps-and-geolocation-ionic-fe635a00249d

But i am getting “Runtime Error: ViewChild is not defined”
Anyone knows what is wrong here?

Edit:
I had added this in home.ts:

initMap(){
    this.initMap();
}

not sure why

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { NodnummerPage } from '../nodnummer/nodnummer';

import { GoogleMaps, GoogleMap} from '@ionic-native/google-maps';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
@ViewChild('map') mapElement: ElementRef;
map: GoogleMap;

  constructor(public navCtrl: NavController, private _googleMaps: GoogleMaps) {
  }
  pushAbout() {
    this.navCtrl.push(AboutPage);
  }
    pushNodnummer() {
    this.navCtrl.push(NodnummerPage);
  }
  
  ngAfterViewInit(){
    this.initMap();
}

initMap(){
    let element = this.mapElement.nativeElement;
    this.map = this._googleMaps.create(element)
}

}

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

<ion-content padding>
    <nav class="nav-top"></nav>
    <div class="section-main">
        <button ion-button block (click)="pushAbout()">Om appen</button>
        <button ion-button block (click)="pushNodnummer()">Lokale nødnummer</button>
            <div #map id="map" style="height:100%"></div>
</div>
</ion-content>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEYTHATIREMOVED=3.exp&libraries=places">
</script>

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { NodnummerPage } from '../pages/nodnummer/nodnummer';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { GoogleMaps} from '@ionic-native/google-maps';


@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NodnummerPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NodnummerPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    GoogleMaps,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
2

You seem to have forgotten to import ViewChild from @angular/core’ in home.ts

import { Component, ViewChild } from '@angular/core';

1 Like
3

Aah look at that, yup! that made the error go away, just a blank page showing though :S
Any idea why that is?

4

Not sure now. maybe try moving


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPxDz4bO-QBRcZOnYQ_34LlTkAEGBK00E"></script>

to the end of <head> in index.html

5

If you use @ionic-native/google-maps, remove <script src="https://maps.googleapis.com/maps/api/js></script> it.

If you use Google Maps JavaScript v3, remove the code of @ionic-native/google-maps