TypeError: undefined is not an object (evaluating 'targets[0].offsetHeight')

[avramanaareddy]

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS
• Browser

cordova information: (run $> cordova plugin list)

insert the output from the command here

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

Current behavior:

Expected behavior:

Screen capture or video record:

Related code, data or error log (please format your code or data):

The person who share your project files on Github (or other git repository) is in faster lane than other people.
Please share your project files on Github or others(Bitbucket, Gitlabs...etc).
If you don't want to share your project files, please create a demo project, then share it.

Screen captures, and/or native logs(such as Logcat, xcode logs) are appreciate.

Giving much information, you are waiting time is less.
Thank you for your cooperation.

[avramanaareddy]

"@ionic-native/core": "^5.28.0",

"@ionic-native/google-maps": "^5.5.0",

installed them into my ionic 5 project. When I call the google map it gives the error

TypeError: undefined is not an object (evaluating 'targets[0].offsetHeight')

[avramanaareddy]

Unable to trace it, and it is surprise, I gave the height of the div element where I am displaying the google map.

[wf9a5m75]

Since too less information, I can't track the issue

[avramanaareddy]

We would like to implement the google maps in our application, we have the proper license from google as well.
We are developing the native mobile app using ionic 5, so installed the required plugins.
This is the code piece we implemented and tried testing, but it got failed and giving the above mentioned error.
in html

<ion-button (click)="initMap()"> Submit

    <div  id="map_canvas" style="height:500px"></div>
    
</ion-card-content>

in css #map_canvas{

height:700px;

}

in the typescript file

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

//declaration for Google Map
map:GoogleMap;

//calling the implemented method here
ionViewDidEnter() {
this.initMap();
}

//implemented method
initMap(): void {

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

};
this.map = GoogleMaps.create('map_canvas', mapOptions);
document.getElementById('map_canvas').style.height='700px';

this.map.addMarker({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
}).then((marker:Marker)=>{
marker.showInfoWindow();
});

}

When we ran the application, in the screen I clicked the submit button, then screen has no change, in the debug window the error is

TypeError: undefined is not an object (evaluating 'targets[0].offsetHeight')

I have searched whole internet, and tried different ways but no solution for this issue.
Can you please help me if you have solved this kind of issue earlier?

[avramanaareddy]

Since too less information, I can't track the issue

We would like to implement the google maps in our application, we have the proper license from google as well.
We are developing the native mobile app using ionic 5, so installed the required plugins.
This is the code piece we implemented and tried testing, but it got failed and giving the above mentioned error.
in html

<ion-button (click)="initMap()"> Submit

<div  id="map_canvas" style="height:500px"></div>

in css #map_canvas{ height:700px; }

in the typescript file

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

//declaration for Google Map
map:GoogleMap;

//calling the implemented method here
ionViewDidEnter() {
this.initMap();
}

//implemented method
initMap(): void {

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

};
this.map = GoogleMaps.create('map_canvas', mapOptions);
document.getElementById('map_canvas').style.height='700px';

this.map.addMarker({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
}).then((marker:Marker)=>{
marker.showInfoWindow();
});

}

When we ran the application, in the screen I clicked the submit button, then screen has no change, in the debug window the error is

TypeError: undefined is not an object (evaluating 'targets[0].offsetHeight')

I have searched whole internet, and tried different ways but no solution for this issue.
Can you please help me if you have solved this kind of issue earlier?

[wf9a5m75]

I guess you try to open a map in dialog box, correct?

[avramanaareddy]

I guess you try to open a map in dialog box, correct?

No. It is not at all a dialog box. It should display on the screen only. The code snipped is ion-card. which will show it as a block of code.

[wf9a5m75]

Hmm. My suggestion is that you try to start a fresh project for the test instead of implement the maps plugin into your app directly.

[wf9a5m75]

Please share the small project on github. (And don't paste your code here)

[satsangamusa]

Please share the small project on github. (And don't paste your code here)

https://github.com/satsangamusa/GoogleMap.git is the small project I have committed the code now into git. Please look into ti.

[avramanaareddy]

Please share the small project on github. (And don't paste your code here)

Please share the small project on github. (And don't paste your code here)
https://github.com/satsangamusa/GoogleMap.git is the small project I have committed the code now into git. Please look into ti.

[avramanaareddy]

Can anybody please give update on it?

[waklele]

hi guys, I face this issue too
is there someone who solved this issue yet?

[FreddieFred34]

I had this issue too. This worked for me:

  async ionViewWillLeave() {
    this.map.remove();
  }