Cordova-plugin-googlemaps: Cannot read property 'getDiv' of undefined
hi , i have a problem in ionic 4
core.js:14597 ERROR TypeError: Cannot read property 'getDiv' of undefined
at CordovaGoogleMaps._remove (js_CordovaGoogleMaps-for-browser.js:178)
at Map.callback (BaseClass.js:115)
at Map.trigger (BaseClass.js:70)
at Map.remove (Map.js:670)
at index.js:1124
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:16147)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
package.json
```
"dependencies": {
"@angular/common": "~7.1.4",
"@angular/core": "~7.1.4",
"@angular/forms": "~7.1.4",
"@angular/http": "~7.1.4",
"@angular/platform-browser": "~7.1.4",
"@angular/platform-browser-dynamic": "~7.1.4",
"@angular/router": "~7.1.4",
"@ionic-native/camera": "^5.0.0-beta.22",
"@ionic-native/core": "^5.0.0-beta.22",
"@ionic-native/diagnostic": "^5.0.0-beta.22",
"@ionic-native/google-maps": "^5.0.0-beta.25",
"@ionic-native/image-picker": "^5.0.0-beta.22",
"@ionic-native/in-app-browser": "^5.0.0-beta.22",
"@ionic-native/native-storage": "^5.0.0-beta.22",
"@ionic-native/social-sharing": "^5.0.0-beta.22",
"@ionic-native/splash-screen": "5.0.0-beta.21",
"@ionic-native/status-bar": "5.0.0-beta.21",
"@ionic/angular": "4.0.0-rc.0",
"@ionic/pro": "2.0.4",
"cordova-browser": "5.0.4",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-googlemaps": "^2.4.6",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.3.1",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-telerik-imagepicker": "^2.2.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.4.3",
"cordova.plugins.diagnostic": "^4.0.10",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
html :
ts file :
async ngOnInit() {
await this.platform.ready();
await this.loadMap();
}
loadMap() {
const options: GoogleMapOptions = {
controls: {
compass: true,
myLocation: true,
myLocationButton: true,
zoom: true,
mapToolbar: true
}
};
this.map = GoogleMaps.create( 'map_canvas', options);
if (this.pos.latitude && this.pos.latitude !== 'null') {
const markerOption: MarkerOptions = {
icon: {
url: 'assets/img/marker.png',
size: {
width: 150,
height: 100
}
},
position: {lat: this.pos.latitude, lng: this.pos.longitude},
};
this.map.addMarkerSync(markerOption);
this.map.moveCamera({
target: {lat: markerOption.position.lat, lng: markerOption.position.lng},
zoom: 17
}).then(() => {
});
} else {
const opt: GeocoderRequest = {
address: this.pos.area.city.name + ' ' + this.pos.area.name
};
Geocoder.geocode(opt)
.then((results: GeocoderResult[]) => {
const circle: Circle = this.map.addCircleSync({
'center': results[0].position,
'radius': 500,
'strokeColor': '#17bbc1',
'strokeWidth': 2,
'strokeOpacity': 0.8,
'fillOpacity': 0.35,
'fillColor': '#17bbc1'
});
this.map.moveCamera({
target: circle.getBounds(),
zoom: 17,
}).then(() => {
});
});
}
}
```
roshaninet
All 30 comments
Which line cause the problem?
wf9a5m75
on 31 Dec 2018
this is the problem :
core.js:14597 ERROR TypeError: Cannot read property 'getDiv' of undefined at CordovaGoogleMaps._remove (js_CordovaGoogleMaps-for-browser.js:178) at Map.callback (BaseClass.js:115) at Map.trigger (BaseClass.js:70) at Map.remove (Map.js:670) at index.js:1124 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:16147) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
I asked which line in your code
wf9a5m75
on 1 Jan 2019
Regarding of the error message, you tried to remove the map which has been already removed.
wf9a5m75
on 1 Jan 2019
i dont know witch line of my code
this is all of my code and i dont know where i tried to remove the map which has been already removed
this is just sample of load map and set marker on that .
i dont know why this error are shown on console and map not load .
roshaninet
on 1 Jan 2019
Okay, please share your project files(everything) on GitHub repository.
wf9a5m75
on 1 Jan 2019
https://github.com/roshaninet/roshanish
its done , please check
roshaninet
on 2 Jan 2019
oh lol!
very silly bug actually.
Set the dev css width and height and it will work ....
`
mapcanvas {
width: 100%;
height: 500px;
}
`
wnabil
on 2 Jan 2019
@roshaninet Thank you for sharing, but I can't read Arabic characters.
Could you tell me how to reproduce your issue with video?
wf9a5m75
on 3 Jan 2019
I have this exact same issue right now, Ionic 4 also.
My main component loads que map, but because of this error I'm recieving a blank page after app first load :/
francovp
on 4 Jan 2019
I update the plugin to the multiple_maps branch I now I have a different but very similar error:
ERROR TypeError: Cannot read property 'destroy' of undefined
at CordovaGoogleMaps._remove (:8080/plugins/cordova-plugin-googlemaps/www/js_CordovaGoogleMaps-for-android_ios.js:845)
at Map.callback (:8080/plugins/cordova-plugin-googlemaps/www/BaseClass.js:162)
at :8080/plugins/cordova-plugin-googlemaps/www/BaseClass.js:76
at Array.forEach (<anonymous>)
at Map.trigger (:8080/plugins/cordova-plugin-googlemaps/www/BaseClass.js:68)
at Map.remove (:8080/plugins/cordova-plugin-googlemaps/www/Map.js:678)
at :8080/9.10b616a337a1e23e29bf.js:1
at n.invokeTask (polyfills.b81ff2e617b7ff5af5c9.js:1)
at Object.onInvokeTask (main.8b6968a2e44bdb27848c.js:1)
at n.invokeTask (polyfills.b81ff2e617b7ff5af5c9.js:1)
@francovp Please try again (reinstall the plugin from the multiple_maps)
wf9a5m75
on 4 Jan 2019
oh lol!
very silly bug actually.Set the dev css width and height and it will work ....
#mapcanvas { width: 100%; height: 500px; }
i did that already
roshaninet
on 5 Jan 2019
this video can show you the problem :
https://youtu.be/AcCloC1ncu4
roshaninet
on 5 Jan 2019
oh lol!
very silly bug actually.
Set the dev css width and height and it will work ....
#mapcanvas { width: 100%; height: 500px; }i did that already
height: 100% will not work, try using pixels
wnabil
on 6 Jan 2019
@wf9a5m75 Sorry por the late response
I'm getting this now, but I think the error is in the Ionic Native plugin
vendor.js:49969 ERROR TypeError: Cannot read property 'offsetHeight' of undefined
at :8080/default~home-home-module~tabs-tabs-module.js:1165
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2766)
at Object.onInvokeTask (vendor.js:51519)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2765)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2533)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:2841)
at ZoneTask.invoke (polyfills.js:2830)
at timer (polyfills.js:4399)
Maybe related to this? https://github.com/ionic-team/ionic-native-google-maps/issues/75
But I have this scss in my code:
#map_canvas { width: 100%; height: 500px; }
francovp
on 7 Jan 2019
oh lol!
very silly bug actually.
Set the dev css width and height and it will work ....
#mapcanvas { width: 100%; height: 500px; }i did that already
height: 100% will not work, try using pixels
i did that . still not work :(
roshaninet
on 8 Jan 2019
Same problem on Ionic 3.
vendor.js:1823 ERROR TypeError: Cannot read property 'getDiv' of undefined
at CordovaGoogleMaps._remove (:8100/plugins/cordova-plugin-googlemaps/www/js_CordovaGoogleMaps-for-android_ios.js:839)
at Map.callback (:8100/plugins/cordova-plugin-googlemaps/www/BaseClass.js:116)
at Map.trigger (:8100/plugins/cordova-plugin-googlemaps/www/BaseClass.js:71)
at Map.remove (:8100/plugins/cordova-plugin-googlemaps/www/Map.js:671)
at vendor.js:72259
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (vendor.js:5125)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at e.invokeTask (polyfills.js:3)
defaultErrorLogger @ vendor.js:1823
The funny thing that yesterday everything was working. Today I did new build and it's not working.
I tried to remove and add platform. I tried to remove plugins and install again. Nothing helped. I have styles for map_canvas div.
h2u
on 9 Jan 2019
驴Any update on this? I can't make to work the iOS version because of this.
francovp
on 11 Jan 2019
Btw mine worked after I tried to reinstall plugins.
"cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
"@types/google-maps": "^3.2.0",
"@ionic-native/google-maps": "^4.15.1",
And the code is
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 56.9711614,
lng: 23.8489883
},
zoom: 10,
tilt: 0
},
controls: {
zoom: true
}
};
this.map = GoogleMaps.create('map_canvas_el', mapOptions);
Sadly, I can't reproduce @h2u solution on Ionic 4.
This is really blocking me.
Thinking right now on making a native iOS version of my app to address this problem :/
francovp
on 16 Jan 2019
Currently dealing with this issue as well, but on my end it comes and goes. Seems like on some instances of loading the pages the map renders fine, but on others it does not with no change to the loadMap() code.
zachsirera
on 18 Jan 2019
I have my loadMap() code inside ngOnInit() event on Ionic 4 because ionViewDidLoad no longer exists. I think that's the problem maybe because cordova-plugin-googlemaps tries to render the map but the Ionic view is not ready yet?
francovp
on 18 Jan 2019
Yeah I do as well. Specifically:
async ngOnInit() {
await this.platform.ready();
await this.loadMap();
As this is how Ionic wrote it in their tutorial.
zachsirera
on 19 Jan 2019
ping
wf9a5m75
on 6 Feb 2019
pong
GabrielMoreyra
on 6 Feb 2019
Since no body provide enough project files, I will close this thread if nobody provide them in couple of days.
wf9a5m75
on 6 Feb 2019
I was able to resolve the issue. I am forgetting the exact details, but it had to do with the plugins I had not being the correct version. I updated all of the plugins to the appropriate beta and it worked.
Unfortunately for others, this is a project that I am hoping to monetize so I cannot share any of the working source code with you.
zachsirera
on 7 Feb 2019
Congrats, zachsirera .
Ping to others.
wf9a5m75
on 8 Feb 2019
Just now got this error again, but... Map on Tab page is working with no problems, but when I try to init map on another page, I see error: Cannot read property 'getDiv' of undefined. Code is 100% same.
I changed id of the div element (it was same as on Tab page) and now it works.
And there was no difference if Tab map was loaded or not before map init on another page.
h2u
on 12 Feb 2019
Related issues
TimothyFehr
路
5Comments
javi124
路
5Comments
vosecek
路
3Comments
ahmadkam72
路
3Comments
christoph-puppe
路
5Comments
Most helpful comment
I was able to resolve the issue. I am forgetting the exact details, but it had to do with the plugins I had not being the correct version. I updated all of the plugins to the appropriate beta and it worked.
Unfortunately for others, this is a project that I am hoping to monetize so I cannot share any of the working source code with you.