anchor.diff:    If you just want to play with `angular2-google-maps` and don't want to set up a full project with NPM, you can use the following Plunker. It has all the dependencies to play with Angular2, Typescript and of course `angular2-google-maps`:
   
   a.button.button-icon.blue-light(href='http://plnkr.co/edit/YX7W20?p=preview') &raquo; Play with angular2-google-maps on Plunker
  -
  -+section_title('Package installation', 'package-installation')
  -:marked
  -  `angular2-google-maps` is shipped via the Node Package Manager. So make sure that you have [NodeJS](https://nodejs.org) installed.
  -
  -  You can install the package with the following command:
  -
  -.code-highlight
  -  :marked
  -    ```markup
  -    npm install angular2-google-maps
  -    ```
  -
  -:marked
  -  ### What's included in the package?
  -  This package contains different sources for different users:
  -
  -  1. The files located in the root directory are ES5 compatible files that can be consumed using CommonJS.
  -  2. The files under `/es6` are ES6 compatible files that can be transpiled to E5 using any transpiler.
  -  3. The files under `/ts` are the TypeScript source files.
  -  4. The `/bundles` directory contains the following files:
  -    * `angular2-google-maps.js` and `angular2-google-maps.min.js` are bundles that can be consumed using [SystemJS](https://github.com/systemjs/systemjs).
   
   +section_title('Setting up a basic project structure', 'project-structure')
   
  
positive.code:   h4.note-title Note
    p.note-description
      :marked
          **If you're familiar with setting up Angular 2 projects with TypeScript & SystemJS, you can skip this part and move on to this part:**
  
          **[Setting up angular2-google-maps](#angular2-google-maps-setup)**
  
  :marked
    ### Installing TypeScript
    `angular2-google-maps` works best with [TypeScript](http://www.typescriptlang.org/) version 1.7+.
    If you have an older version of TypeScript or haven't installed TypeScript yet, please run the following command:
  
  .code-highlight
  
negative.code:     code.language-markup npm install -g typescript
  
  :marked
    ### Create an Angular CLI project
  
    We start by creating a project with [Angular CLI](https://cli.angular.io/). Angular CLI makes it easy to create an application that already works and allows you to follow the best practices. I you haven't installed Angular CLI yet, please run the following command first:
  
  .code-highlight
    :marked
      ```markup
      npm install -g angular-cli
      ```
  
  :marked
    Run the following commands to create a new Angular 2 project with Angular CLI:
  
  .code-highlight
    :marked
      ```markup
      ng new my-maps-project
      cd my-maps-project
      ```  
  
  +section_title('Setting up angular2-google-maps', 'angular2-google-maps-setup')
  
  :marked
    ### Install angular2-google-maps
  
    `angular2-google-maps` gets shipped via the Node Package Manager (NPM). Run the following command to add it to your new project:
  
  .code-highlight
    :marked
      ```markup
      npm install angular2-google-maps --save
      ```
  
  :marked
    ### Update system-config.js
    Next, we have to add the following lines to the **src/system-config.js**. Modify the file like below:
  
  .code-highlight
    :marked
      ```typescript
      /***********************************************************************************************
      * User Configuration.
      **********************************************************************************************/
      /** Map relative paths to URLs. */
      const map: any = {
        'angular2-google-maps': 'vendor/angular2-google-maps'
      };
  
      /** User packages configuration. */
      const packages: any = {
        'angular2-google-maps/core': {
          defaultExtension: 'js',
          main: 'index.js' // you can also use core.umd.js here, if you want faster loads
        }
      };
      ```
  
  :marked
    ### Update angular-cli-build.js
    Open the `angular-cli-build.js` located in the root folder.
  
    Include angular2-gogole-maps in the `vendorNpmFiles` array. **Don't delete existing array entries.**
  
  .code-highlight
    :marked
      ```typescript
      var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
  
      module.exports = function(defaults) {
        return new Angular2App(defaults, {
          vendorNpmFiles: [
            ...
            // add the following line:
            'angular2-google-maps/**/*.+(js|js.map)'
          ]
        });
      };
      ```
      
  :marked
    ### Bootstrap
    Open `src/main.ts` and inject the `GOOGLE_MAPS_PROVIDERS`.
  
  .code-highlight
    :marked
      ```typescript
      my-maps-project
      import { bootstrap } from '@angular/platform-browser-dynamic';
      import { enableProdMode } from '@angular/core';
      import { MyMapsProjectAppComponent, environment } from './app/';
  
      import {GOOGLE_MAPS_PROVIDERS} from 'angular2-google-maps/core';
  
      if (environment.production) {
        enableProdMode();
      }
  
      bootstrap(MyMapsProjectAppComponent, [
        GOOGLE_MAPS_PROVIDERS
      ]);
      ```
  
  :marked
    ### Extending the app component
    Angular CLI already created an app component the we'll now use to create our first google map.  
    Open the file `src/app/my-maps-project.component.ts` and modify it like below:
  
  .code-highlight
    :marked
      ```typescript
      import { Component } from '@angular/core';
      import { GOOGLE_MAPS_DIRECTIVES } from 'angular2-google-maps/core';
  
      @Component({
        moduleId: module.id,
        selector: 'my-maps-project-app',
        templateUrl: 'my-maps-project.component.html',
        styleUrls: ['my-maps-project.component.css'],
        directives: [GOOGLE_MAPS_DIRECTIVES]
      })
      export class MyMapsProjectAppComponent {
        title: string = 'My first angular2-google-maps project';
        lat: number = 51.678418;
        lng: number = 7.809007;
      }
  
      ```
  
  :marked
    ### Setup the template
    Open the file `src/app/my-maps-project.component.html` and paste the following content:
  
  .code-highlight
    :marked
      ```markup
      <h1>{{ title }}</h1>
  
      <!-- this creates a google map on the page with the given lat/lng from -->
      <!-- the component as the initial center of the map: -->
  
      <sebm-google-map [latitude]="lat" [longitude]="lng">
        <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
      </sebm-google-map>
  
      ```
  
  :marked
    ### Setup the CSS file
    Open the file `src/app/my-maps-project.component.css` and paste the following content:
  
  .code-highlight
    :marked
      ```css
      .sebm-google-map-container {
        height: 300px;
      }
      ```
  
  