Untitled

<html>
  <head>
    <!--
              Minified version of my project !
    -->
    <!-- jQuery and Bootstrap -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>

    <!-- Google Maps -->
    <!-- Marker cluster api to be able to add many pointers to google maps -->
    <!-- Local google maps service -->
    <script src="app/services/google-maps.service.js"></script>
      
      <script
        src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
      </script>

    <!-- 
      Google maps UI 
      At the end of the URL we load our initMap function inside google.maps-service.js file
    -->
      <script
        async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRkoeyhWeokhDYDzGPJoBExYdVDi9FbzE&callback=initMap">
      </script>

  </head>
  <!-- 3. Display the application -->
  <body>
    <!-- Main app component -->
    <my-app>Loading...</my-app>

      <!-- Google maps UI (temp location) 
        If you load the googleMap div here it's fine!
        But if you wanna load the google maps API inside a 
        component, Angular can not fint your google maps API script files.
      -->
      <div #googleMapVC id="googleMap" class="borderShadow"></div>

  </body>
</html>

import {  Component, OnInit, AfterViewChecked } from '@angular/core';

declare var componentHandler: any;
declare var jQuery:any;

@Component({
  selector: 'maps',
  templateUrl: '../app/maps/maps.component.html',
  styleUrls: [
      'app/maps/maps.component.css'
  ]
})

export class MapsComponent {
  
  ngAfterViewChecked() {
    componentHandler.upgradeAllRegistered();

  }

}

<div id="wrapperMaps">

    <h4 class="textBackground">Google maps</h4>
      
      <!-- 
        I want to load the google maps API from here,
        (not possible atm)
      -->
      <div id="googleMap"></div>

</div>

function initMap() {

  var map = new google.maps.Map(document.getElementById('googleMap'), {
    zoom: 10,
    center: {lat: 57.715567, lng: 11.984026}
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
  /******
  **
  ** Sweden cordinates
  **
  ******/
  {lat: 57.683522, lng: 12.002759},
  {lat: 57.700674, lng: 11.974408},
  {lat: 57.681494, lng: 12.003012},
  {lat: 57.678302, lng: 12.005312},
  {lat: 57.656136, lng: 12.016982},
  {lat: 57.656122, lng: 12.019364},
  {lat: 57.649467, lng: 12.002159},
  {lat: 57.646449, lng: 11.996659},
  {lat: 57.641077, lng: 12.009796}
];

#googleMap{
  width: 300px;
  height: 300px;
  border: 1px solid red;
}