Workikng ion native google maps&geolocation example

Ionic Framework ionic-v3
1

Hi community&ionic devs!

I’m having some hard times followed by capitulation on setting up Ionic project with newwst libraries and Ionic native google maps plugins.

Please, can you provide me working example of the most up-to-date ionic project using native ion google maps and geolocation?

I tried to use following packages, but there is so many errors and issues with it (which I don’t want to talk here), but I need start my own development with working app base:

  {
    "name": "tx_client",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
      "clean": "ionic-app-scripts clean",
      "build": "ionic-app-scripts build",
      "lint": "ionic-app-scripts lint",
      "ionic:build": "ionic-app-scripts build",
      "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
      "@angular/common": "5.2.4",
      "@angular/compiler": "5.2.4",
      "@angular/compiler-cli": "5.2.4",
      "@angular/core": "5.2.4",
      "@angular/forms": "5.2.4",
      "@angular/http": "5.2.4",
      "@angular/platform-browser": "5.2.4",
      "@angular/platform-browser-dynamic": "5.2.4",
      "@ionic-native/core": "4.5.3",
      "@ionic-native/google-maps": "^4.5.3",
      "@ionic-native/splash-screen": "4.5.3",
      "@ionic-native/status-bar": "^4.5.3",
      "@ionic/storage": "^2.1.3",
      "@types/googlemaps": "^3.30.5",
      "android-versions": "^1.3.0",
      "cordova-android": "^6.4.0",
      "cordova-browser": "5.0.3",
      "cordova-plugin-device": "^1.1.4",
      "cordova-plugin-geolocation": "^4.0.1",
      "cordova-plugin-googlemaps": "^2.2.3",
      "cordova-plugin-ionic-webview": "^1.1.16",
      "cordova-plugin-splashscreen": "^4.0.3",
      "cordova-plugin-statusbar": "^2.4.1",
      "cordova-plugin-whitelist": "^1.3.1",
      "ionic-angular": "3.9.2",
      "ionic-plugin-keyboard": "^2.2.1",
      "ionicons": "3.0.0",
      "lodash": "^4.17.5",
      "rxjs": "5.5.6",
      "sw-toolbox": "3.6.0",
      "zone.js": "0.8.18"
    },
    "devDependencies": {
      "@ionic/app-scripts": "3.1.8",
      "typescript": "2.7.1"
    },
    "description": "An Ionic project",
    "cordova": {
      "plugins": {
        "cordova-plugin-geolocation": {},
        "ionic-plugin-keyboard": {},
        "cordova-plugin-whitelist": {},
        "cordova-plugin-device": {},
        "cordova-plugin-splashscreen": {},
        "cordova-plugin-ionic-webview": {},
        "cordova-plugin-statusbar": {},
        "cordova-plugin-googlemaps": {
          "API_KEY_FOR_ANDROID": "A KEY",
          "PLAY_SERVICES_VERSION": "11.8.0"
        }
      },
      "platforms": [
        "browser",
        "android"
      ]
    }
  }

Thanks in advance!

2

@ionic-native/google-maps quick demo

3

well, this is actually working app, thak you for that!
only issue I have is that the map does not render. just the div with the google logo at the bottom.
I should have correct api_key through…
any idea what should be missing? do I need to whitelist something?

4