diff --git a/config/webpack.common.js b/config/webpack.common.js
index 7c8a1df7..eac5c18e 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -228,7 +228,8 @@ module.exports = {
       $: 'jquery',
       jquery: 'jquery',
       "Tether": 'tether',
-      "window.Tether": "tether"
+      "window.Tether": "tether",
+      "GoogleMapsLoader": "google-maps",
     })
   ],
 
diff --git a/package.json b/package.json
index a0cc235d..702d7512 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "core-js": "^2.2.2",
     "font-awesome": "^4.6.1",
     "font-awesome-sass-loader": "^1.0.1",
+    "google-maps": "^3.2.1",
     "jquery": "^2.2.3",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.2",
diff --git a/src/app/pages/maps/components/googleMaps/googleMaps.component.ts b/src/app/pages/maps/components/googleMaps/googleMaps.component.ts
index 9fa7558b..e04e6e67 100644
--- a/src/app/pages/maps/components/googleMaps/googleMaps.component.ts
+++ b/src/app/pages/maps/components/googleMaps/googleMaps.component.ts
@@ -1,19 +1,30 @@
-import {Component, ViewEncapsulation} from 'angular2/core';
+import {Component, ViewEncapsulation, ElementRef} from 'angular2/core';
+import {BaCard} from '../../../../theme';
+import {DOM} from "angular2/src/platform/dom/dom_adapter";
 
 @Component({
   selector: 'google-maps',
   pipes: [],
   providers: [],
-  styles: [],
-  template: 'googleMaps'
+  styles: [require('./googleMaps.scss')],
+  directives: [BaCard],
+  template: require('./googleMaps.html'),
 })
 export class GoogleMaps {
 
-  constructor() {
+  constructor(private _elementRef:ElementRef) {
   }
 
   ngOnInit() {
-    console.log('googleMaps');
   }
 
+  ngAfterViewInit() {
+    GoogleMapsLoader.load((google) => {
+      new google.maps.Map(DOM.querySelector(this._elementRef.nativeElement, '.google-maps'), {
+        center: new google.maps.LatLng(44.5403, -78.5463),
+        zoom: 8,
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      });
+    });
+  }
 }
diff --git a/src/app/pages/maps/components/googleMaps/googleMaps.html b/src/app/pages/maps/components/googleMaps/googleMaps.html
new file mode 100644
index 00000000..2eb639e1
--- /dev/null
+++ b/src/app/pages/maps/components/googleMaps/googleMaps.html
@@ -0,0 +1,3 @@
+<ba-card title="GoogleMaps" baCardClass="popular-app medium-card" class="viewport100">
+  <div class="google-maps"></div>
+</ba-card>
diff --git a/src/app/pages/maps/components/googleMaps/googleMaps.scss b/src/app/pages/maps/components/googleMaps/googleMaps.scss
new file mode 100644
index 00000000..8cc0c501
--- /dev/null
+++ b/src/app/pages/maps/components/googleMaps/googleMaps.scss
@@ -0,0 +1,4 @@
+.google-maps {
+   //TODO: hotfix
+  height: 320px;
+}
diff --git a/src/custom-typings.d.ts b/src/custom-typings.d.ts
index a23dc742..035c854b 100644
--- a/src/custom-typings.d.ts
+++ b/src/custom-typings.d.ts
@@ -30,6 +30,7 @@ import * as _ from 'lodash'
  */
 
 declare var $:any;
+declare var GoogleMapsLoader:any;
 
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
 declare var ENV: string;