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.
Maybe you could provide some more information? Can you share the code you are using? Does that code have the proper type annotation?
The conference app uses maps - that should help you out a bit.
Found it!
Now its working for me. Example soon in my blog…
Thank you Guys!
Can you tell what the problem was? I’m having a similar issue
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 --saveI 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';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>
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.
Try this project: https://github.com/aaronksaunders/ionic2GMapNative
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!
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
You need to run on a device, not in your browser 
Try:
ionic emulate iOS
Because Ionic2GMapNative is using the Google Maps Native plugin
OK! Thanks for your reply, I will try this week
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
@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 ?
@mahmoudismail Are you using RC0? Have you read this article? It might help you.
@richardshergold yes i’ve use RC0 like conference app . but in conference app in package.json not included the external library google maps.
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).
This project helped me build correctly with both rollup and also webpack