Cordova-plugin-googlemaps: TypeError: _this._objectInstance.remove is not a function

Created on 13 Dec 2017 · 8Comments · Source: mapsplugin/cordova-plugin-googlemaps

message:"_this._objectInstance.remove is not a function"
stack:"TypeError: _this._objectInstance.remove is not a function\n at file:///android_asset/www/build/vendor.js:94173:51\n at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15660)\n at Object.onInvokeTask (file:///android_asset/www/build/vendor.js:5281:33)\n at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15581)\n at r.runTask (file:///android_asset/www/build/polyfills.js:3:10834)\n at e.invokeTask (file:///android_asset/www/build/polyfills.js:3:16794)\n at i.isUsingGlobalCallback.invoke (file:///android_asset/www/build/polyfills.js:3:16682)\n at n (file:///android_asset/www/build/polyfills.js:3:61)"
__proto__:Error {constructor: , name: "TypeError", message: "", …}
constructor:function TypeError() { … }
message:""
name:"TypeError"
toString:function toString() { … }
__proto__:Object {constructor: , name: "Error", message: "", …}

need more information pending / waiting

Source

ghost

Most helpful comment

@piernik follow below steps

import view child
import { Component, ViewChild } from @angular/core;
Now declare viewchild with id of div you want use as map
export class DirectionPage {
@ViewChild('mapCanvas') element;
Now pass this element property native element to Google maps create method
this.map = GoogleMaps.create(this.element.nativeElement);
you will get map visible without errors
In template use this line
<div #mapCanvas style="height:100% !important;">
</div>

ghost on 2 Jan 2018

👍7

All 8 comments

Use GoogleMaps.create()

wf9a5m75 on 13 Dec 2017

@wf9a5m75 I have done this but still getting same error
/* In template i used */

/* and I declared class variable */

map: GoogleMap;

/* I used this function to load map */
loadMap() {

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

    this.map = GoogleMaps.create('location',mapOptions);

    //Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');


        // Now you can use all methods safely.
        this.map.addMarker({
            title: 'trainer',
            icon: 'red',
            animation: 'DROP',
            position: {
              lat: 43.0741904,
              lng: -89.3809802
            }
          })
          .then((marker:Marker) => {
             marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {


              });
          });

      });
  }

ghost on 14 Dec 2017

Please share your project files on GitHub. I will check it.

wf9a5m75 on 14 Dec 2017

ping

wf9a5m75 on 15 Dec 2017

I have resolved the issue
Just used viewchild to get element and it works thanks

ghost on 15 Dec 2017

@Faisalali23 Can You post Your solution? I think I have the same issue.

piernik on 2 Jan 2018

@piernik follow below steps

import view child
import { Component, ViewChild } from @angular/core;
Now declare viewchild with id of div you want use as map
export class DirectionPage {
@ViewChild('mapCanvas') element;
Now pass this element property native element to Google maps create method
this.map = GoogleMaps.create(this.element.nativeElement);
you will get map visible without errors
In template use this line
<div #mapCanvas style="height:100% !important;">
</div>