Ionic 2 + Typescript + Google Maps


#1

Hi,

I am trying to integrate Google Maps in my Ionic 2 app.

The case is that after install typings:

typings install dt~google-maps --global --save

I still can’t use the interface:

Error TS2304: Cannot find name 'MapOptions'
Error TS2304: Cannot find name 'MapTypeId'
Error TS2503: Cannot find namespace 'google'

What should I do to use the interface in my Ionic 2 Page?

Thank you.


#2

Maybe you could provide some more information? Can you share the code you are using? Does that code have the proper type annotation?


#3

The conference app uses maps - that should help you out a bit.


#4

Found it!

Now its working for me. Example soon in my blog…

Thank you Guys!


#5

Can you tell what the problem was? I’m having a similar issue


#6

Just install this library:
https://angular-maps.com/docs/getting-started.html

npm install angular2-google-maps

Import the components and the types in your component:

import {MapsAPILoader, NoOpMapsAPILoader, MouseEvent,
  ANGULAR2_GOOGLE_MAPS_PROVIDERS,
  ANGULAR2_GOOGLE_MAPS_DIRECTIVES} from 'angular2-google-maps/core';
import * as mapTypes from 'angular2-google-maps/services/google-maps-types';

You don’t need to use typings, don’t do this:

typings install dt~google-maps --global --save

#7

I also had the same issue, I installed the angular2-google-maps and and add the following import:

import {MapsAPILoader,ANGULAR_GOOGLE_MAPS_PROVIDERS,ANGULAR_GOOGLE_MAPS_DIRECTIVES} from 'angular2-google-maps/core';

#8

Please, check:

Your package.json

{
"dependencies": {
  "@angular/common": "^2.0.0-rc.1",
  "@angular/compiler": "^2.0.0-rc.1",
  "@angular/core": "^2.0.0-rc.1",
  "@angular/http": "^2.0.0-rc.1",
  "@angular/platform-browser": "^2.0.0-rc.1",
  "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
  "@angular/router": "^2.0.0-rc.1",
  "angular2-google-maps": "^0.10.0",
  "es6-shim": "^0.35.0",
  "ionic-angular": "2.0.0-beta.7",
  "ionic-native": "^1.1.0",
  "ionicons": "3.0.0",
  "reflect-metadata": "^0.1.3",
  "rxjs": "5.0.0-beta.6",
  "zone.js": "^0.6.12"
},
"devDependencies": {
  "del": "2.2.0",
  "gulp": "3.9.1",
  "gulp-watch": "4.3.5",
  "ionic-gulp-browserify-typescript": "^1.1.0",
  "ionic-gulp-fonts-copy": "^1.0.0",
  "ionic-gulp-html-copy": "^1.0.0",
  "ionic-gulp-sass-build": "^1.0.0",
  "ionic-gulp-scripts-copy": "^2.0.0",
  "run-sequence": "1.1.5"
},
"cordovaPlugins": [
  "cordova-plugin-device",
  "cordova-plugin-console",
  "cordova-plugin-whitelist",
  "cordova-plugin-splashscreen",
  "cordova-plugin-statusbar",
  "ionic-plugin-keyboard"
],
"cordovaPlatforms": [
  "ios",
  {
    "platform": "ios",
    "version": "",
    "locator": "ios"
  }
],
"name": "MYAPP",
"description": "MYAPP: An Ionic project"

}

page.ts

import {Page} from 'ionic-angular';
import {MapsAPILoader, NoOpMapsAPILoader, MouseEvent,
  ANGULAR2_GOOGLE_MAPS_PROVIDERS,
  ANGULAR2_GOOGLE_MAPS_DIRECTIVES} from 'angular2-google-maps/core';
import * as mapTypes from 'angular2-google-maps/services/google-maps-types';
import {StyledMapDirective} from './styledmap.directive'

interface marker {
	lat: number;
	lng: number;
	label?: string;
	draggable: boolean;
	icon?: string;
}

@Page({
  templateUrl: 'build/pages/myapp/myapp.html',
  directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES, StyledMapDirective],
  providers: [ANGULAR2_GOOGLE_MAPS_PROVIDERS]
})
export class MyAppPage {

	zoom: number = 15;

	lat: number = -37.7863713;
    lng: number = 175.2796333;

	constructor() {
	}

	clickedMarker(label: string, index: number) {
		console.log(`clicked the marker: ${label || index}`)
	}

	markers: marker[] = [
		{
		  lat: -37.7863713,
		  lng: 175.2796333,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.8253519,
		  lng: 175.30493468,
		  draggable: false,
		  icon: 'images/orange.png'
		},
		{
		  lat: -37.86853098,
		  lng: 175.26411709,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.85358475,
		  lng: 175.32038055,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.73954476,
		  lng: 175.28868009,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.75407573,
		  lng: 175.21182779,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.80593724,
		  lng: 175.32974407,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.74895678,
		  lng: 175.22176761,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.70672479,
		  lng: 175.23250678,
		  draggable: false,
		  icon: 'images/orange.png'
		},
		{
		  lat: -37.75595149,
		  lng: 175.25231972,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.74854235,
		  lng: 175.30724184,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.8393965,
		  lng: 175.3039549,
		  draggable: false,
		  icon: 'images/orange.png'
		},
		{
		  lat: -37.78773635,
		  lng: 175.30169089,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.71974562,
		  lng: 175.23715994,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.83055433,
		  lng: 175.1942229,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.78217909,
		  lng: 175.28763432,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.7884884,
		  lng: 175.27938514,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.7871251,
		  lng: 175.27362189,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.78962244,
		  lng: 175.2701263,
		  draggable: false,
		  icon: 'images/orange.png'
		},
		{
		  lat: -37.77925284,
		  lng: 175.28368136,
		  draggable: false,
		  icon: 'images/orange.png'
		},
		{
		  lat: -37.788564,
		  lng: 175.27702785,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.78548639,
		  lng: 175.28020256,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.78106383,
		  lng: 175.27218997,
		  draggable: false,
		  icon: 'images/orange.png'
		},
		{
		  lat: -37.78234609,
		  lng: 175.27329406,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.78191198,
		  lng: 175.281669,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.78548186,
		  lng: 175.2855147,
		  draggable: false,
		  icon: 'images/orange.png'
		},
		{
		  lat: -37.78959158,
		  lng: 175.2764085,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.77440027,
		  lng: 175.29619834,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.80077476,
		  lng: 175.27846355,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.78957771,
		  lng: 175.28071984,
		  draggable: false,
		  icon: 'images/orange.png'
		},
		{
		  lat: -37.79604021,
		  lng: 175.29061813,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.7897009,
		  lng: 175.29083406,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.78441183,
		  lng: 175.25843104,
		  draggable: false,
		  icon: 'images/orange.png'
		},
		{
		  lat: -37.7868152,
		  lng: 175.26906712,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.78328231,
		  lng: 175.29976579,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.77310321,
		  lng: 175.26923721,
		  draggable: false,
		  icon: 'images/green.png'
		},
		{
		  lat: -37.80071695,
		  lng: 175.27893055,
		  draggable: false,
		  icon: 'images/orange.png'
		},
		{
		  lat: -37.7762745,
		  lng: 175.29528041,
		  draggable: false,
		  icon: 'images/red.png'
		},
		{
		  lat: -37.78449823,
		  lng: 175.28656292,
		  draggable: false,
		  icon: 'images/green.png'
		}
	];
}

page.html

<ion-navbar *navbar transparent>



MyApp

  <sebm-google-map class="sebm-google-map-container"
    [latitude]="lat"
    [longitude]="lng"
    [zoom]="zoom"
    [disableDefaultUI]="true"
    [zoomControl]="false"
    [draggable]="false"
    [minZoom]="13"
    [maxZoom]="14"
    >
    <styled-map></styled-map>

    <sebm-google-map-marker 
        *ngFor="let m of markers; let i = index"
        (markerClick)="clickedMarker(m.label, i)"
        [latitude]="m.lat"
        [longitude]="m.lng"
        [label]="m.label"
        [markerDraggable]="m.draggable"
        [iconUrl]="m.icon">
        
      <sebm-google-map-info-window>
        
	    <ion-list no-lines>
		    <ion-item>
		      <ion-thumbnail item-left>
		        <img class="avatar" src="http://media3.popsugar-assets.com/files/2015/06/17/859/n/1922283/c2bbcc0f_edit_img_image_1090627_1434569298_PSRUSH_0617_JonSnow_061715_SQUARE/i/Reasons-People-Love-Game-Thrones-Jon-Snow-Video.jpg">
		      </ion-thumbnail>
		      <h2>John Snow</h2>
		    </ion-item>
		</ion-list>

      </sebm-google-map-info-window>
      
    </sebm-google-map-marker>

  </sebm-google-map>

#9

Hello! Somebody know where can I find one example working using Google Maps in Ionic 2? Im new with Ionic and Im a little bit lost.
Thanks in advance.

Best regards.


#10

Try this project: https://github.com/aaronksaunders/ionic2GMapNative


#11

Thanks for your reply Matheo, but in my computer doesnt work, I think that is for my versions, my system information is:

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic CLI Version: 2.0.0-beta.31
Ionic App Lib Version: 2.0.0-beta.17
OS:
Node Version: v4.4.5

Do you know if is compatible with my versions?
Thanks in advance!


#12

Try updating your node to 5.12.0. My setup is:

Cordova CLI: 6.3.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10-201607151701
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19
OS: Distributor ID:     Ubuntu Description:     Ubuntu 16.04.1 LTS 
Node Version: v5.12.0

Also update your CLI with:

sudo npm install ionic@beta cordova -g

#13

You need to run on a device, not in your browser :slight_smile:

Try:
ionic emulate iOS

Because Ionic2GMapNative is using the Google Maps Native plugin


#14

OK! Thanks for your reply, I will try this week :slight_smile:


#15

This is what I had to do with ionic-angular@2.0.0-beta.11, which is pinned to angular2@2.0.0-rc.4, and angular2-google-maps@0.12.0 which technically requires @angular/core@2.0.0-rc.2:

The latest version of angular2-google-maps requires angular RC6


My first map-app errors
#16

@richardshergold , i want to use google maps in my application but i’ve added external google maps library in src/index.html but after the build nothing change with error google is not defined, and in this directory www/index.html not added the javascript link. any suggestion about that ?


#17

@mahmoudismail Are you using RC0? Have you read this article? It might help you.


#18

@richardshergold yes i’ve use RC0 like conference app . but in conference app in package.json not included the external library google maps.


#19

I tried this, but quickly got an error when I restarted Ionic. I see from the docs that simply npm installing should be enough in general, so I’m confused now.

(Note that I do not get any typescript errors from VSCode and the library is installed in node_modules)

(node:16318) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): 
Error: 'AgmCoreModule' is not exported by node_modules/angular2-google-maps/core/index.js 
(imported by src/app/app.module.ts).

#20

This project helped me build correctly with both rollup and also webpack

https://github.com/smichelotti/ionic2-google-maps-test/blob/573dc4b4db348617a774c7143a9ac5821f518645/scripts/rollup.config.js