Googe Maps: Do I have to use Ionic Native?

Ionic Framework ionic-v3
1

Hi All,

I have just upgraded from Ionic 2 beta to rc3. In order to eliminate compilation errors I changed my Google Maps implementation to use the Ionic native api. This fixed my compilation errors, but I see that the Ionic native api has limitations. For example, there is no fitBounds function that is in googles api.

Question

Is it possible to use Ionic 2 rc3 with using Googles api directly and not the Ionic native api?

If so, How should I configure my app to use the api?

Or, is there any reason why I would want to use the Ionic native api over accessing Googles api directly?

Thanks

package.json

  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "@types/google-maps": "^3.2.0",
    "@types/meteor": "^1.3.31",
    "@types/underscore": "^1.7.36",
    "accounts-base-client-side": "^0.1.1",
    "accounts-phone": "0.0.1",
    "angular2-moment": "^1.0.0-beta.6",
    "babel-runtime": "^6.18.0",
    "google-maps": "^3.2.1",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "meteor-client-side": "^1.3.5",
    "meteor-node-stubs": "^0.2.4",
    "meteor-rxjs": "^0.4.5",
    "meteor-typings": "^1.3.1",
    "moment": "^2.15.2",
    "rxjs": "^5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
2

Hey,

I checked, seems I don’t use Ionic Native for google map. It work and worked for RC.0, 1, 2, 3 and now 4

Typescript I use: “@types/googlemaps”: “3.20.34”

in my index.html I’ve got:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&amp;libraries=places,geometry"></script>

Seems it’s all I use, hope that will help you

1 Like
3

My issue is if I try:

public map: google.maps.Map = null;

I get the following error at compile time:

Cannot find namespace 'google'.

Here is my index.html:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXX&amp;libraries=places,geometry"></script>

Here is my updated package.json. To apply the changes, I ran npm install.

  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "@types/googlemaps": "3.20.34",
    "@types/meteor": "^1.3.31",
    "@types/underscore": "^1.7.36",
    "accounts-base-client-side": "^0.1.1",
    "accounts-phone": "0.0.1",
    "angular2-moment": "^1.0.0-beta.6",
    "babel-runtime": "^6.18.0",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "meteor-client-side": "^1.3.5",
    "meteor-node-stubs": "^0.2.4",
    "meteor-rxjs": "^0.4.5",
    "meteor-typings": "^1.3.1",
    "moment": "^2.15.2",
    "rxjs": "^5.0.0-beta.12",
    "zone.js": "0.6.26"
  },

I have tried adding:

declare var google: any;

but it makes no difference.

4

Maybe: Try to remove “@types/googlemaps” and reinstall it with --save-dev instead of --save (that’s a difference in comparison to my project)

Just checked my code, I don’t import or declare anything for it, it works straight forward.

1 Like
5

Thanks.

I tried removing "@types/googlemaps": "3.20.34",

and then ran:

npm install @types/googlemaps --save-dev.

as you can see in the package.json below, "@types/googlemaps": "^3.25.40", was installed.

But I still get:

Cannot find namespace 'google'

package.json

  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "@types/meteor": "^1.3.31",
    "@types/underscore": "^1.7.36",
    "accounts-base-client-side": "^0.1.1",
    "accounts-phone": "0.0.1",
    "angular2-moment": "^1.0.0-beta.6",
    "babel-runtime": "^6.18.0",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "meteor-client-side": "^1.3.5",
    "meteor-node-stubs": "^0.2.4",
    "meteor-rxjs": "^0.4.5",
    "meteor-typings": "^1.3.1",
    "moment": "^2.15.2",
    "rxjs": "^5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.37-5",
    "@types/chai": "^3.4.34",
    "@types/googlemaps": "^3.25.40",
    "@types/meteor-accounts-phone": "0.0.5",
    "@types/meteor-publish-composite": "0.0.32",
    "awesome-typescript-loader": "^2.2.4",
    "typescript": "2.0.8",
    "typescript-extends": "^1.0.1"
  },
6

I double checked, the only difference I see is the version. Maybe try with version 3.20.34 explicitly … but maybe that’s not the problem :frowning:

Silly questions, your map:google.maps.Map find place in a page not in provider right?

7

I am not 100% what you mean by:

your map:google.maps.Map find place in a page not in provider right?

But, it’s defined in a page called JobPage, which is defined in app.module.ts under declarations and entryComponents.

See public map: google.maps.Map = null; below:

import { Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { NavController, NavParams, InfiniteScroll, Content, Platform, Events, AlertController, LoadingController, ViewController, PopoverController } from 'ionic-angular';
import { JobModel } from '../model/jobModel';
import { PersonModel } from '../model/personModel';
import { SubCategoryModel } from '../model/subCategoryModel';
import { LocationModel } from '../model/locationModel';
import { RatingModel } from '../model/ratingModel';
import { ReviewPage } from '../review/review';
import { ChatsPage } from '../chats/chats';
import { CategoryPage } from '../category/category';
import { PersonPage } from '../person/person';
import { MyCameraPage } from '../mycamera/mycamera';
import { JobService } from '../service/jobService';
import { PersonService } from '../service/personService';
import { RatingService } from '../service/ratingService';
import { UtilityService } from '../utils/utilityService';
import { SearchJobsParent } from '../searchjobs/searchjobsParent';
import { MapRangeService } from '../service/mapRangeService';
// import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, GoogleMapsMarker, GoogleMapsLatLngBounds, GoogleMapsAnimation } from 'ionic-native';
//declare var google: any;

@Component({
  selector: 'job',
  templateUrl: 'job.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class JobPage extends SearchJobsParent {
  @ViewChild(Content) content: Content;

  public MAX_RESULTS_RATINGS: number = 15;
  public firstResultRatings: number = 0;
  public jobLoading: boolean = true;
  public mapLoading: boolean = true;
  public map: google.maps.Map = null;

Error

[15:05:01]  typescript: E:/Development/IDE/ionic-apps/WhatsAppClone/src/pages/job/job.ts, line: 35
            Cannot find namespace 'google'.

ps. I tried the version explicitly, buy still get the same error.

npm install @types/googlemaps@3.20.34 --save-dev

8

:frowning:

Look same as my code.

Maybe something in the config, like tsconfig.json?

Mine:

 {
"compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
        "dom",
        "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "removeComments": true
},
"include": [
    "src/**/*.ts"
],
"exclude": [
    "node_modules"
],
"compileOnSave": false,
"atom": {
    "rewriteTsconfig": false
}
}

Or maybe in the import order, in my index.html, following:

 <script type="text/javascript" src="https://maps.googleapis.....

find place just after

 <ion-app></ion-app>
1 Like
9

I appreciate your help.

I tried moving the script in index.html up like yours, no affect.

I copied your tsconfig.json too, no affect.

10

When I run:

E:\Development\IDE\ionic-apps\WhatsAppClone>npm install @types/googlemaps --save
ionic-hello-world@ E:\Development\IDE\ionic-apps\WhatsAppClone
+-- @types/googlemaps@3.25.40
+-- UNMET PEER DEPENDENCY meteor-client-side@1.3.5
`-- UNMET PEER DEPENDENCY rxjs@5.0.0-beta.12

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN accounts-phone@0.0.1 requires a peer of meteor-client-side@~0.2.3 but none was installed.
npm WARN meteor-rxjs@0.4.7 requires a peer of rxjs@^5.0.1 but none was installed.

Are those warnings perhaps a problem?

"@types/googlemaps": "^3.25.40", does get added to my package.json

11

I don’t know what to say, look same as me…maybe then the solution find place in another direction than mine :wink:

Does node_modules/@types/googlemaps/* exists on your machine?

When you open your code with an editor could you follow/open the declaration google.maps.Map or does the editor also don’t find it?

12

My node_modules/@types/googlemaps/* does exist:

enter image description here

However, that’s all that’s in it. Is that correct?

My editor does not follow the link, but it may be faulty because it does not follow any links (even of working objecs).

13

Looks good…again :frowning:

Does the index.d.ts of @types/googlemaps begin with:

 declare namespace google.maps {
     /***** Map *****/
    export class Map extends MVCObject {

?

14

Yes it does. Very strange. I will try do some more looking around. Appreciate your time.

15

Then while compiling that definition file is ignored…so strange

Hope you gonna find soon, I’m out of ideas right now sorry

16

I will try delete my node_modules, and start again. Maybe that works.

p.s. This did not work.

17

Is your project public? If you want could try to clone it and build it on my machine…

18

It is not I’m afraid. Thank you.

Let me try a little longer, and if I can’t fix it I can upload it to GitHub.

1 Like
19

I solved this my adding the following to declarations.d.ts

/// <reference path="../node_modules/@types/googlemaps/index.d.ts" />

not sure why, I thought npm install is supposed to set this up as needed.

1 Like
20

Good to hear that you solved it.

Where exactly do this file declarations.d.ts find place? Curiosity, seems I don’t have one :wink:

2 Likes