Googe Maps: Do I have to use Ionic Native?

richardmarais · December 30, 2016, 11:50am

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

reedrichards · December 30, 2016, 12:12pm

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

richardmarais · December 30, 2016, 12:40pm

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

reedrichards · December 30, 2016, 12:53pm

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.

richardmarais · December 30, 2016, 1:07pm

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

reedrichards · December 30, 2016, 1:16pm

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?

richardmarais · December 30, 2016, 1:19pm

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

reedrichards · December 30, 2016, 1:35pm

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>

richardmarais · December 30, 2016, 1:43pm

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.

richardmarais · December 30, 2016, 1:55pm

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

reedrichards · December 30, 2016, 1:58pm

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?

richardmarais · December 30, 2016, 2:05pm

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

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

reedrichards · December 30, 2016, 2:09pm

Looks good…again

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

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

?

richardmarais · December 30, 2016, 2:11pm

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

reedrichards · December 30, 2016, 2:13pm

Then while compiling that definition file is ignored…so strange

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

richardmarais · December 30, 2016, 2:13pm

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

p.s. This did not work.

reedrichards · December 30, 2016, 2:28pm

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

richardmarais · December 30, 2016, 2:30pm

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.

richardmarais · December 31, 2016, 9:30am

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.

reedrichards · December 31, 2016, 10:23am

Good to hear that you solved it.

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

Topic		Replies	Views
Ionic Native Google Maps api ionic-v3	2	4462	July 7, 2017
My first map-app errors ionic-v3	10	2113	January 2, 2017
Anyone know of a good tutorial for implementing native maps? ionic-v3	1	379	February 22, 2017
Google map using at ionic2 ionic-v3	1	715	April 5, 2017
Native Maps V2 beta? ionic-v3	12	1091	March 15, 2017

Googe Maps: Do I have to use Ionic Native?

Related topics