Ionic 4 & Google Maps plugin

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'
3 Likes

You have to use @ionic-native/core@beta as well.

Here is an example project.

1 Like

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

this is my repo: https://github.com/Anthony2539/waygng-ionic-v4

Thank you, I got the reason.
Please reinstall @ionic-native/google-maps@5.0.0-beta.19.
You can built with it.

1 Like

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'; ?

Where the map should be displayed in this UI?

#map_canvas {
  height: 90%;
}

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.g282d0a7bfd_0_140

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

1 Like

I tested 5.0.0-beta.20 and it works, the map is displayed.
Thx for your help

Thank you for reporting :slight_smile:

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.

  1. Go on map page from the menu (the map is correctly init)
  2. Go on search page from menu
  3. Choose a station in the list
  4. Click on the buttom at the right top to on map page with id
  5. The map does not render

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.