Open avramanaareddy opened 3 years ago
"@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')
Unable to trace it, and it is surprise, I gave the height of the div element where I am displaying the google map.
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
in css
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?
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?
I guess you try to open a map in dialog box, correct?
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.
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.
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.
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.
Can anybody please give update on it?
hi guys, I face this issue too is there someone who solved this issue yet?
I had this issue too. This worked for me:
async ionViewWillLeave() {
this.map.remove();
}
I'm submitting a ... (check one with "x")
If you choose 'problem or bug report', please select OS: (check one with "x")
cordova information: (run
$> cordova plugin list
)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):