I would like to know if anyone has ever used the plugin Google Maps with ionic 4.
Because i tested this https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4 and it seem not compatible with rxjs.
"@ionic-native/google-maps": "5.0.0-beta.17"
Error: Can't resolve 'rxjs/Observable' in '/node_modules/@ionic-native/google-maps/ngx'
You have to use @ionic-native/core@beta as well.
Here is an example project.
This is my package.json
"dependencies": {
"@angular/common": "6.0.9",
"@angular/core": "6.0.9",
"@angular/forms": "6.0.9",
"@angular/http": "6.0.9",
"@angular/platform-browser": "6.0.9",
"@angular/platform-browser-dynamic": "6.0.9",
"@angular/router": "6.0.9",
"@ionic-native/core": "5.0.0-beta.14",
"@ionic-native/geolocation": "5.0.0-beta.14",
"@ionic-native/globalization": "5.0.0-beta.14",
"@ionic-native/splash-screen": "5.0.0-beta.14",
"@ionic-native/status-bar": "5.0.0-beta.14",
"@ionic-native/google-maps": "^5.0.0-beta.18",
"@ionic/angular": "4.0.0-beta.3",
"@ionic/ng-toolkit": "1.0.0",
"@ionic/pro": "2.0.3",
"@ionic/schematics-angular": "1.0.1",
"@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^3.0.1",
"angularfire2": "^5.0.0-rc.11",
"cordova-ios": "4.5.5",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-globalization": "^1.11.0",
"cordova-plugin-googlemaps": "^2.4.1",
"cordova-plugin-ionic-keyboard": "^2.1.2",
"cordova-plugin-ionic-webview": "^2.0.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"core-js": "^2.5.3",
"firebase": "^5.3.0",
"ionic-plugin-keyboard": "^2.2.1",
"lodash": "^4.17.10",
"moment": "^2.22.2",
"rxjs": "6.2.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/cli": "6.0.8",
"@angular/compiler": "6.0.9",
"@angular/compiler-cli": "6.0.9",
"@angular/language-service": "6.0.9",
"@angular-devkit/architect": "0.7.0-rc.3",
"@angular-devkit/build-angular": "0.7.0-rc.3",
"@angular-devkit/core": "0.7.0-rc.3",
"@angular-devkit/schematics": "0.7.0-rc.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.5.2",
"codelyzer": "~4.4.2",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.2",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.7.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-globalization": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
},
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "",
"API_KEY_FOR_IOS": "",
"LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
"LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
}
},
"platforms": [
"ios"
]
}
and my import in app.module.ts
import { GoogleMaps } from '@ionic-native/google-maps/ngx';
but I still have the issue…
I don’t understand how it work in example project
Ok, please share your project files on GitHub
Thank you, I got the reason.
Please reinstall @ionic-native/google-maps@5.0.0-beta.19.
You can built with it.
Great it works !!!
Thanks you
Now i am just testing a simple code
map.ts:
import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import {
GoogleMaps,
GoogleMap,
} from '@ionic-native/google-maps';
@Component({
selector: 'app-map',
templateUrl: './map.page.html',
styleUrls: ['./map.page.scss'],
})
export class MapPage implements OnInit {
map: GoogleMap;
loading: any;
constructor(private platform: Platform) { }
async ngOnInit() {
await this.platform.ready();
await this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas', {
camera: {
target: {
lat: 43.0741704,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
});
}
}
and my map.html:
<ion-content>
<div id="map_canvas">
</div>
</ion-content>
When i test on ios, i have a white screen with no error.
We need GoogleService-Info.plist ?
Do i have to use import { GoogleMaps, GoogleMap, } from '@ionic-native/google-maps/ngx'; ?
#map_canvas {
height: 90%;
}
I have updated my code with
#map_canvas {
height: 90%;
}
But i have always a white screen on my iphone.
The map should be display on the third tab.
When application uses tab template, ionic-native/googlemaps can not detect the target div correctly.
I fixed this problem. Please reinstall @ionic-native/google-maps@5.0.20-beta.
By the way, you can develop your app on browser as well (at least the map page)
Try $> ionic cordova run browser -l
I tested 5.0.0-beta.20 and it works, the map is displayed.
Thx for your help
Thank you for reporting 
hi, i have an another issue.
ERROR: DIV [#map_canvas] is too small. Must be bigger than 100x100.
I can go on map page without id, in this case i center the map on user position and with id i center the map on station geolocalisation.
To reproduce the issue.
I think the issue is due to the map is init twice…
You can see it on my repo.
Thx
ERROR: DIV [#map_canvas] is too small. Must be bigger than 100x100. is not a bug.
specified div is too small.
Please read source code of @ionic-native/google-maps before asking me.
I know this is my css:
#map_canvas {
height: 100%;
min-width: 150px;
min-height: 150px;
}
At the first init the map render good but not at the second
Please debug by yourself as much as possible. It’s your application.
hello @wf9a5m75
Do you test the latest version of ionic ("@ionic/angular": “4.0.0-beta.12”) and your plugin ?
There seems to be a regression because the map doesn’t display.