# Googe Maps: Do I have to use Ionic Native?

**URL:** <https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751>\
**Category:** ionic-v3\
**Created:** [December 30, 2016, 11:50am UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751 "2016-12-30T11:50:44Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 30, 2016, 11:50am UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/1 "2016-12-30T11:50:44Z")

</div>

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](https://ionicframework.com/docs/v2/native/google-maps/) api. This fixed my compilation errors, but I see that the [Ionic native](https://ionicframework.com/docs/v2/native/google-maps/) 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](https://ionicframework.com/docs/v2/native/google-maps/) 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](https://ionicframework.com/docs/v2/native/google-maps/) 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"
  },
```

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [December 30, 2016, 12:12pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/2 "2016-12-30T12:12:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 30, 2016, 12:40pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/3 "2016-12-30T12:40:31Z")

</div>

> [@reedrichards](#):
>
> “@types/googlemaps”: "3.20.34

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.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [December 30, 2016, 12:53pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/4 "2016-12-30T12:53:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 30, 2016, 1:07pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/5 "2016-12-30T13:07:29Z")

</div>

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"
  },

```

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [December 30, 2016, 1:16pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/6 "2016-12-30T13:16:03Z")

</div>

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 ☹

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

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 30, 2016, 1:19pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/7 "2016-12-30T13:19:53Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [December 30, 2016, 1:35pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/8 "2016-12-30T13:35:39Z")

</div>

☹

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>
```

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 30, 2016, 1:43pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/9 "2016-12-30T13:43:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 30, 2016, 1:55pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/10 "2016-12-30T13:55:49Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [December 30, 2016, 1:58pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/11 "2016-12-30T13:58:28Z")

</div>

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

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?

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 30, 2016, 2:05pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/12 "2016-12-30T14:05:28Z")

</div>

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

[![enter image description here](https://i.stack.imgur.com/KS2wK.png)](https://i.stack.imgur.com/KS2wK.png)

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).

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [December 30, 2016, 2:09pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/13 "2016-12-30T14:09:05Z")

</div>

Looks good…again ☹

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

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

```

?

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 30, 2016, 2:11pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/14 "2016-12-30T14:11:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [December 30, 2016, 2:13pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/15 "2016-12-30T14:13:07Z")

</div>

Then while compiling that definition file is ignored…so strange

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

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 30, 2016, 2:13pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/16 "2016-12-30T14:13:53Z")

</div>

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

p.s. This did not work.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [December 30, 2016, 2:28pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/17 "2016-12-30T14:28:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 30, 2016, 2:30pm UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/18 "2016-12-30T14:30:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\
**Post date:** [December 31, 2016, 9:30am UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/19 "2016-12-31T09:30:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [December 31, 2016, 10:23am UTC](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751/20 "2016-12-31T10:23:04Z")

</div>

Good to hear that you solved it.

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

[Next page](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751.md?page=2)