google maps

config/webpack.common.js

@@ -228,7 +228,8 @@ module.exports = {
       $: 'jquery',
       jquery: 'jquery',
       "Tether": 'tether',
-      "window.Tether": "tether"
+      "window.Tether": "tether",
+      "GoogleMapsLoader": "google-maps",
     })
   ],
 

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

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
+      });
+    });
+  }
 }

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>

src/app/pages/maps/components/googleMaps/googleMaps.scss

@@ -0,0 +1,4 @@
+.google-maps {
+   //TODO: hotfix
+  height: 320px;
+}

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;