anchor.diff:      :marked
           It is really important that you define a height for the css class `.sebm-google-map-container`. Otherwise, you won't see a map on the page!
   
  -:marked
  -  ### Create app/boot.ts - Loading the angular2-google-maps providers
  -  To be able to run our application component, we have to create a **boot.ts** file in the **app** directory with the following content:
  -
  -.code-highlight
  -  :marked
  -    ```typescript
  -    import {bootstrap}    from '@angular/platform-browser-dynamic';
  -    import {AppComponent} from './app.component';
  -    import {GOOGLE_MAPS_PROVIDERS} from 'angular2-google-maps/core';
  -
  -    // this line boots our application on the page in the <my-app> element:
  -    // Note: It is required to add the GOOGLE_MAPS_PROVIDERS here!
  -    bootstrap(AppComponent, [GOOGLE_MAPS_PROVIDERS]);
  -    ```
  -    ### Final project structure
  -    Our final project structure should look like this:
  -    ```markup
  -    my-project
  -      - app
  -        -- app.component.ts
  -        -- boot.ts
  -      - index.html
  -      - node_modules
  -      - package.json
  -      - systemjs.config.js
  -      - tsconfig.json
  -      - typings.json
  -    ```
  -
  -+section_title('Compile and run your application', 'compile-and-run')
  -
  -:marked
  -  Great! So we have created all the needed source files, so everything should be ready to compile an run the application.
  ++section_title('Build and run your application', 'build-and-run')
  +
  +:marked
  +  Great! So we have created all the needed source files, so everything should be ready to build an run the application.
   
     Run the following command in the **project root folder**:
   
   .code-highlight
     :marked
       ```markup
  -    npm start
  -    ```
  -:marked
  +    ng serve
  +    ```
  +:marked
  +  Then, open the following URL in your browser: <a href="http://localhost:4200/" target="_blank">http://localhost:4200/</a>
  +
     The command starts the following things:
     * Starts the TypeScript compiler and compiles all sources files (watches also for file changes in the source files and recompiles all files if something has changed)
  -  * Starts a local web server (called lite-server) to serve the Angular 2 application. It refreshes the page when served files change.
  -
  -  **When everything works as expected, a browser tab should open and you should see your first Google Map built with angular2-google-maps!**
  +  * Starts a local web server to serve the Angular 2 application. It refreshes the page when served files change.
  +
  +  **When everything works as expected, you should see your first Google Map built with angular2-google-maps 🎉🎉🎉!**
   
   +section_title('Questions?', 'questions')
   :marked
     When you have problems setting up **angular2-google-maps** or questions in general, the best way to join the chat where you can ask your questions:
   
  -  [Chat on Gitter](https://gitter.im/SebastianM/angular2-google-maps)
  +a.button.button-icon.blue-light(href='https://gitter.im/SebastianM/angular2-google-maps') &raquo; Chat on Gitter
  
positive.code:   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')
  
  
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;
      }
      ```
  
  