CODEWITHSUNDEEP
javascriptangularionic-frameworkgoogle-maps-api-3cordova-plugins
rmbits
rmbits

Reputation: 2327

ReferenceError: element is not defined - cordova-plugin-googlemaps

I'm working on an Ionic 3 project and for map related functionality, I chose Google Maps plugin suggested by Ionic Team. The Google Maps Ionic plugin is basically a wrapper around cordova-plugin-googlemaps. I've followed the steps mentioned in this presentation.

I'm not able to show map in element with id map_canvas, which is placed in one of page html. Here's what I've tried so far:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { GoogleMaps, GoogleMap, Marker } from '@ionic-native/google-maps';


@IonicPage()
@Component({
  selector: 'page-step-two',
  templateUrl: 'step-two.html',
})
export class StepTwoPage {

  private stepTwoForm: FormGroup;
  private map: GoogleMap;

  constructor(private formBuilder: FormBuilder) {
    this.stepTwoForm = this.formBuilder.group({
      prename: ['', Validators.required],
      name: ['', Validators.required],
      email: ['', Validators.required],
      mobile: ['', Validators.required],
      yearLiving: ['', Validators.required],
    });
  }

  ionViewDidLoad() {
    // Create a map after the view is ready 
    // and the native platform is ready.
    this.loadMap();
  }

  loadMap() {
    this.map = GoogleMaps.create('map_canvas'); // <--- Problematic statement
  }

  goToStepThree() {

  }

}

And here's page html:

<ion-header>
  <ion-navbar>
    <ion-title>Step - 2</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <progress-bar [stepCount]="5" [currentStep]="2"></progress-bar>

  <ion-card class="step-body-card">
    <ion-card-header>
      <h1 text-center class="card-title">Persona</h1>
    </ion-card-header>
    <ion-card-content>
      <form [formGroup]="stepTwoForm" (ngSubmit)="goToStepThree()">
        <ion-grid>
          <ion-row>
            <ion-col col-12 col-sm>
              <ion-item>
                <ion-input type="text" placeholder="Prename" formControlName="prename"></ion-input>
              </ion-item>
            </ion-col>
            <ion-col col-12 col-sm>
              <ion-item>
                <ion-input type="text" placeholder="Name" formControlName="name"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col col-12 col-sm>
              <ion-item>
                <ion-input type="email" placeholder="Email" formControlName="email"></ion-input>
              </ion-item>
            </ion-col>
            <ion-col col-12 col-sm>
              <ion-item>
                <ion-input type="tel" placeholder="Mobile" formControlName="mobile"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col col-12 col-sm>
              <ion-item>
                <ion-input type="number" min="0" placeholder="Year of living" formControlName="yearLiving"></ion-input>
              </ion-item>
            </ion-col>
            <ion-col col-12 col-sm>

            </ion-col>
          </ion-row>
        </ion-grid>
        <button margin-top ion-button type="submit" [disabled]="!stepTwoForm.valid">Continue</button>
      </form>
    </ion-card-content>
  </ion-card>
</ion-content>

I tried running in Android and it gives an error, without anyhting being shown on map_canvas element. The error is produced by cordova:

Error in Success callbackId: CordovaGoogleMaps1188158820 : ReferenceError: element is not defined

And here's stack-trace from console:

Uncaught ReferenceError: element is not defined
    at Map.<anonymous> (:8100/plugins/cordova-plugin-googlemaps/www/CordovaGoogleMaps.js:645)
    at Map.trigger (:8100/plugins/cordova-plugin-googlemaps/www/BaseClass.js:68)
    at Map.set (:8100/plugins/cordova-plugin-googlemaps/www/BaseClass.js:35)
    at Map.getMap (:8100/plugins/cordova-plugin-googlemaps/www/Map.js:152)
    at :8100/plugins/cordova-plugin-googlemaps/www/CordovaGoogleMaps.js:881
    at Object.callbackFromNative (cordova.js:291)
    at <anonymous>:1:9

I can confirm that this error is produced by statement while initializing or creating map, pointed out as Problematic statement in page.ts. I'm unable to get the underlying problem for this error.

Please help me troubleshooting the problem and suggest fix.

EDIT
After debugging I found out that the error only occurs if the map_canvas element (div) is inside the form, if I take it out of the form tag, it works as expected and map shows.

Maybe this is a bug or something is wrong with FormBuilder. I need to show Google Map inside form, so please help me fixing this odd behavior of Google Map plugin. Edited question which includes full form for reference now and simplified map creation logic.

Upvotes: 1

Views: 374

Answers (1)

wf9a5m75
wf9a5m75

Reputation: 6158

Update

After building shared project, I can not reproduce the error enter image description here

The problem has been gone at least v2.3.8

Upvotes: 1

Related Questions