├── src
├── pages
│ ├── example-1
│ │ ├── example-1.scss
│ │ ├── example-1.html
│ │ ├── example-1.module.ts
│ │ └── example-1.ts
│ ├── example-2
│ │ ├── example-2.scss
│ │ ├── example-2.html
│ │ ├── example-2.module.ts
│ │ └── example-2.ts
│ ├── example-3
│ │ ├── example-3.scss
│ │ ├── example-3.html
│ │ ├── example-3.module.ts
│ │ └── example-3.ts
│ ├── example-4
│ │ ├── example-4.scss
│ │ ├── example-4.html
│ │ ├── example-4.module.ts
│ │ └── example-4.ts
│ └── example-5
│ │ ├── example-5.scss
│ │ ├── example-5.html
│ │ ├── example-5.module.ts
│ │ └── example-5.ts
├── assets
│ └── icon
│ │ └── favicon.ico
├── app
│ ├── main.ts
│ ├── app.html
│ ├── app.scss
│ ├── app.module.ts
│ └── app.component.ts
├── manifest.json
├── service-worker.js
├── index.html
└── theme
│ └── variables.scss
├── ionic.config.json
├── tslint.json
├── tsconfig.json
├── LICENSE
├── package.json
├── README.md
├── .gitignore
└── config.xml
/src/pages/example-1/example-1.scss:
--------------------------------------------------------------------------------
1 | page-example-1 {
2 | #map {
3 | height: 100%;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/pages/example-2/example-2.scss:
--------------------------------------------------------------------------------
1 | page-example-2 {
2 | #map {
3 | height: 100%;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/pages/example-3/example-3.scss:
--------------------------------------------------------------------------------
1 | page-example-3 {
2 | #map {
3 | height: 100%;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/pages/example-4/example-4.scss:
--------------------------------------------------------------------------------
1 | page-example-4 {
2 | #map {
3 | height: 100%;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/pages/example-5/example-5.scss:
--------------------------------------------------------------------------------
1 | page-example-5 {
2 | #map {
3 | height: 100%;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/assets/icon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrunoAlencar/ionic3-google-maps-examples/HEAD/src/assets/icon/favicon.ico
--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "google-maps-example",
3 | "app_id": "",
4 | "type": "ionic-angular",
5 | "integrations": {}
6 | }
7 |
--------------------------------------------------------------------------------
/src/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import { AppModule } from './app.module';
4 |
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "no-duplicate-variable": true,
4 | "no-unused-variable": [
5 | true
6 | ]
7 | },
8 | "rulesDirectory": [
9 | "node_modules/tslint-eslint-rules/dist/rules"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Ionic",
3 | "short_name": "Ionic",
4 | "start_url": "index.html",
5 | "display": "standalone",
6 | "icons": [{
7 | "src": "assets/imgs/logo.png",
8 | "sizes": "512x512",
9 | "type": "image/png"
10 | }],
11 | "background_color": "#4e8ef7",
12 | "theme_color": "#4e8ef7"
13 | }
--------------------------------------------------------------------------------
/src/pages/example-1/example-1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 | First example
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/pages/example-2/example-2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 | Second example
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/pages/example-3/example-3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 | Third example
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/pages/example-4/example-4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 | Fourth example
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/pages/example-5/example-5.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 | Fifth example
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/pages/example-1/example-1.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { IonicPageModule } from 'ionic-angular';
3 | import { Example_1Page } from './example-1';
4 |
5 | @NgModule({
6 | declarations: [
7 | Example_1Page,
8 | ],
9 | imports: [
10 | IonicPageModule.forChild(Example_1Page),
11 | ],
12 | })
13 | export class Example_1PageModule {}
14 |
--------------------------------------------------------------------------------
/src/pages/example-2/example-2.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { IonicPageModule } from 'ionic-angular';
3 | import { Example_2Page } from './example-2';
4 |
5 | @NgModule({
6 | declarations: [
7 | Example_2Page,
8 | ],
9 | imports: [
10 | IonicPageModule.forChild(Example_2Page),
11 | ],
12 | })
13 | export class Example_2PageModule {}
14 |
--------------------------------------------------------------------------------
/src/pages/example-3/example-3.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { IonicPageModule } from 'ionic-angular';
3 | import { Example_3Page } from './example-3';
4 |
5 | @NgModule({
6 | declarations: [
7 | Example_3Page,
8 | ],
9 | imports: [
10 | IonicPageModule.forChild(Example_3Page),
11 | ],
12 | })
13 | export class Example_3PageModule {}
14 |
--------------------------------------------------------------------------------
/src/pages/example-4/example-4.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { IonicPageModule } from 'ionic-angular';
3 | import { Example_4Page } from './example-4';
4 |
5 | @NgModule({
6 | declarations: [
7 | Example_4Page,
8 | ],
9 | imports: [
10 | IonicPageModule.forChild(Example_4Page),
11 | ],
12 | })
13 | export class Example_4PageModule {}
14 |
--------------------------------------------------------------------------------
/src/pages/example-5/example-5.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { IonicPageModule } from 'ionic-angular';
3 | import { Example_5Page } from './example-5';
4 |
5 | @NgModule({
6 | declarations: [
7 | Example_5Page,
8 | ],
9 | imports: [
10 | IonicPageModule.forChild(Example_5Page),
11 | ],
12 | })
13 | export class Example_5PageModule {}
14 |
--------------------------------------------------------------------------------
/src/app/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Menu
5 |
6 |
7 |
8 |
9 |
10 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowSyntheticDefaultImports": true,
4 | "declaration": false,
5 | "emitDecoratorMetadata": true,
6 | "experimentalDecorators": true,
7 | "lib": [
8 | "dom",
9 | "es2015"
10 | ],
11 | "module": "es2015",
12 | "moduleResolution": "node",
13 | "sourceMap": true,
14 | "target": "es5"
15 | },
16 | "include": [
17 | "src/**/*.ts"
18 | ],
19 | "exclude": [
20 | "node_modules"
21 | ],
22 | "compileOnSave": false,
23 | "atom": {
24 | "rewriteTsconfig": false
25 | }
26 | }
--------------------------------------------------------------------------------
/src/app/app.scss:
--------------------------------------------------------------------------------
1 | // http://ionicframework.com/docs/theming/
2 |
3 |
4 | // App Global Sass
5 | // --------------------------------------------------
6 | // Put style rules here that you want to apply globally. These
7 | // styles are for the entire app and not just one component.
8 | // Additionally, this file can be also used as an entry point
9 | // to import other Sass files to be included in the output CSS.
10 | //
11 | // Shared Sass variables, which can be used to adjust Ionic's
12 | // default Sass variables, belong in "theme/variables.scss".
13 | //
14 | // To declare rules for a specific mode, create a child rule
15 | // for the .md, .ios, or .wp mode classes. The mode class is
16 | // automatically applied to the element in the app.
17 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { ErrorHandler, NgModule } from '@angular/core';
3 | import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
4 |
5 | import { MyApp } from './app.component';
6 |
7 | import { StatusBar } from '@ionic-native/status-bar';
8 | import { SplashScreen } from '@ionic-native/splash-screen';
9 |
10 | @NgModule({
11 | declarations: [
12 | MyApp,
13 | ],
14 | imports: [
15 | BrowserModule,
16 | IonicModule.forRoot(MyApp),
17 | ],
18 | bootstrap: [IonicApp],
19 | entryComponents: [
20 | MyApp,
21 | ],
22 | providers: [
23 | StatusBar,
24 | SplashScreen,
25 | {provide: ErrorHandler, useClass: IonicErrorHandler}
26 | ]
27 | })
28 | export class AppModule {}
29 |
--------------------------------------------------------------------------------
/src/pages/example-1/example-1.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, ViewChild } from '@angular/core';
2 | import { IonicPage, NavController, NavParams } from 'ionic-angular';
3 |
4 |
5 | declare const google;
6 |
7 | @IonicPage()
8 | @Component({
9 | selector: 'page-example-1',
10 | templateUrl: 'example-1.html',
11 | })
12 | export class Example_1Page {
13 |
14 | @ViewChild('map') mapElement: ElementRef;
15 | map: any;
16 |
17 |
18 | constructor(
19 | public navCtrl: NavController,
20 | public navParams: NavParams
21 | ) { }
22 |
23 | ionViewDidLoad() {
24 | // start my map
25 | let posMaceio = { lat: -9.648139, lng: -35.717239 }
26 | this.map = new google.maps.Map(this.mapElement.nativeElement, {
27 | zoom: 8,
28 | center: posMaceio,
29 | mapTypeId: 'roadmap'
30 | });
31 | this.map.setCenter(posMaceio);
32 | }
33 |
34 | }
35 |
--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check out https://googlechrome.github.io/sw-toolbox/ for
3 | * more info on how to use sw-toolbox to custom configure your service worker.
4 | */
5 |
6 |
7 | 'use strict';
8 | importScripts('./build/sw-toolbox.js');
9 |
10 | self.toolbox.options.cache = {
11 | name: 'ionic-cache'
12 | };
13 |
14 | // pre-cache our key assets
15 | self.toolbox.precache(
16 | [
17 | './build/main.js',
18 | './build/vendor.js',
19 | './build/main.css',
20 | './build/polyfills.js',
21 | 'index.html',
22 | 'manifest.json'
23 | ]
24 | );
25 |
26 | // dynamically cache any other local assets
27 | self.toolbox.router.any('/*', self.toolbox.cacheFirst);
28 |
29 | // for any other requests go to the network, cache,
30 | // and then only use that cached resource if your user goes offline
31 | self.toolbox.router.default = self.toolbox.networkFirst;
32 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Bruno Alencar
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "google-maps-example",
3 | "version": "0.0.1",
4 | "author": "Ionic Framework",
5 | "homepage": "http://ionicframework.com/",
6 | "private": true,
7 | "scripts": {
8 | "clean": "ionic-app-scripts clean",
9 | "build": "ionic-app-scripts build",
10 | "lint": "ionic-app-scripts lint",
11 | "ionic:build": "ionic-app-scripts build",
12 | "ionic:serve": "ionic-app-scripts serve"
13 | },
14 | "dependencies": {
15 | "@angular/common": "4.4.3",
16 | "@angular/compiler": "4.4.3",
17 | "@angular/compiler-cli": "4.4.3",
18 | "@angular/core": "4.4.3",
19 | "@angular/forms": "4.4.3",
20 | "@angular/http": "4.4.3",
21 | "@angular/platform-browser": "4.4.3",
22 | "@angular/platform-browser-dynamic": "4.4.3",
23 | "@ionic-native/core": "3.12.1",
24 | "@ionic-native/splash-screen": "3.12.1",
25 | "@ionic-native/status-bar": "3.12.1",
26 | "@ionic/storage": "2.0.1",
27 | "ionic-angular": "3.7.1",
28 | "ionicons": "3.0.0",
29 | "rxjs": "5.4.3",
30 | "sw-toolbox": "3.6.0",
31 | "zone.js": "0.8.18"
32 | },
33 | "devDependencies": {
34 | "@ionic/app-scripts": "3.0.0",
35 | "typescript": "2.3.4"
36 | },
37 | "description": "An Ionic project"
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewChild } from '@angular/core';
2 | import { Nav, Platform } from 'ionic-angular';
3 | import { StatusBar } from '@ionic-native/status-bar';
4 | import { SplashScreen } from '@ionic-native/splash-screen';
5 |
6 |
7 | @Component({
8 | templateUrl: 'app.html'
9 | })
10 | export class MyApp {
11 | @ViewChild(Nav) nav: Nav;
12 |
13 | rootPage: any = 'Example_1Page';
14 |
15 | pages: Array<{ title: string, component: any }>;
16 |
17 | constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
18 | this.initializeApp();
19 |
20 | this.pages = [
21 | { title: 'First example', component: 'Example_1Page' },
22 | { title: 'Second example', component: 'Example_2Page' },
23 | { title: 'Third example', component: 'Example_3Page' },
24 | { title: 'Fourth example', component: 'Example_4Page' },
25 | { title: 'Fifth example', component: 'Example_5Page' },
26 | ];
27 |
28 | }
29 |
30 | initializeApp() {
31 | this.platform.ready().then(() => {
32 | this.statusBar.styleDefault();
33 | this.splashScreen.hide();
34 | });
35 | }
36 |
37 | openPage(page) {
38 | this.nav.setRoot(page.component);
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/pages/example-2/example-2.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewChild, ElementRef } from '@angular/core';
2 | import { IonicPage, NavController, NavParams } from 'ionic-angular';
3 |
4 |
5 | declare const google;
6 |
7 | @IonicPage()
8 | @Component({
9 | selector: 'page-example-2',
10 | templateUrl: 'example-2.html',
11 | })
12 | export class Example_2Page {
13 |
14 | @ViewChild('map') mapElement: ElementRef;
15 | map: any;
16 |
17 | labels: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
18 | labelIndex = 0;
19 |
20 | constructor(public navCtrl: NavController, public navParams: NavParams) {
21 | }
22 |
23 | ionViewDidLoad() {
24 | this.startMap();
25 | }
26 |
27 | startMap() {
28 | let posMaceio = { lat: -9.616139, lng: -35.817239 }
29 | this.map = new google.maps.Map(this.mapElement.nativeElement, {
30 | zoom: 12,
31 | center: posMaceio,
32 | mapTypeId: 'roadmap'
33 | });
34 |
35 | google.maps.event.addListener(this.map, 'click', (event) => {
36 | this.addMarker(event.latLng, this.map);
37 | });
38 |
39 | }
40 |
41 | addMarker(location, map) {
42 | let marker = new google.maps.Marker({
43 | position: location,
44 | label: this.labels[this.labelIndex++ % this.labels.length],
45 | map: map
46 | });
47 | }
48 |
49 |
50 | }
51 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ionic 3 examples of using Google Maps API
2 | Some examples of how to use google maps javascript API on a Ionic application and use HTML5 geolocation.
3 |
4 | 
5 |
6 | ## Starting
7 | 1. First you need to visit the google maps javascript API (https://developers.google.com/maps/documentation/javascript/) then get your key.
8 | 2. Second you need the api in your `src/index.html`, this `https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE`.
9 |
10 | ## Using Google Maps Javascript API
11 |
12 | 1. First example:
13 |
14 | - On the html page i just put this div:
15 |
16 | ```
17 |
18 | ```
19 | - Some css
20 | ```
21 | #map {
22 | height: 100%;
23 | }
24 | ```
25 | - On typescript step, i have to do something first. Declare a google variable.
26 | ```
27 | declare const google;
28 | ```
29 | - Then i can use it.
30 | ```
31 | @ViewChild('map') mapElement: ElementRef;
32 | map: any;
33 |
34 | ionViewDidLoad() {
35 | let posMaceio = { lat: -9.648139, lng: -35.717239 }
36 | this.map = new google.maps.Map(this.mapElement.nativeElement, {
37 | zoom: 8,
38 | center: posMaceio,
39 | mapTypeId: 'roadmap'
40 | });
41 | this.map.setCenter(posMaceio);
42 | }
43 | ```
44 | - I hope you enjoyed the first example
45 |
46 | ## License
47 |
48 | The MIT License (MIT). Please see [License File](LICENSE) for more information.
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | # MY OWN IGNORE
61 | *~
62 | *.sw[mnpcod]
63 | *.log
64 | *.tmp
65 | *.tmp.*
66 | log.txt
67 | *.sublime-project
68 | *.sublime-workspace
69 | .vscode/
70 | npm-debug.log*
71 |
72 | .idea/
73 | .sourcemaps/
74 | .sass-cache/
75 | .tmp/
76 | .versions/
77 | coverage/
78 | dist/
79 | node_modules/
80 | tmp/
81 | temp/
82 | hooks/
83 | platforms/
84 | plugins/
85 | plugins/android.json
86 | plugins/ios.json
87 | www/
88 | $RECYCLE.BIN/
89 |
90 | resources/
91 | key.txt
92 | .editorconfig
93 | .DS_Store
94 | Thumbs.db
95 | UserInterfaceState.xcuserstate
96 |
--------------------------------------------------------------------------------
/src/pages/example-3/example-3.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewChild, ElementRef } from '@angular/core';
2 | import { IonicPage, NavController, NavParams } from 'ionic-angular';
3 |
4 |
5 | declare const google;
6 |
7 | @IonicPage()
8 | @Component({
9 | selector: 'page-example-3',
10 | templateUrl: 'example-3.html',
11 | })
12 | export class Example_3Page {
13 |
14 |
15 | @ViewChild('map') mapElement: ElementRef;
16 | map: any;
17 |
18 | labels: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
19 | labelIndex = 0;
20 |
21 | polylines: Array