Angular 2 google map implementation

Question

I\'m new to angular 2. I wanted to use google map API for direction service and implemented the example shown in https://developers.google.com/maps/documentation/javascript/exam

Answer 1

Found a solution for this.

1) Add google map api script in index.html

index.html

2) Add only html related code in your html file.

map.html

3) Add style related codes in separate css file or in component.

map.css

      #map {
        height: 500px;
      }

4) Declare google as variable. And add all javascript in ngOnInit() method.

MapComponent.ts

declare var google: any;

@Component({
    selector: 'map',
    templateUrl: 'app/dashboard/features/map.html',
    styleUrls: ['app/dashboard/features/map.css']
}) 

export class MapComponent implements OnInit, OnChanges {

ngOnInit() {

        var directionsService = new google.maps.DirectionsService;
       var directionsDisplay = new google.maps.DirectionsRenderer;
       var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 41.85, lng: -87.65}
        });
        directionsDisplay.setMap(map);
        calculateAndDisplayRoute(directionsService, directionsDisplay);

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {

          var waypts = [];
          var checkboxArray:any[] = [
              'winnipeg', 'regina','calgary'
      ];
      for (var i = 0; i < checkboxArray.length; i++) {

            waypts.push({
              location: checkboxArray[i],
              stopover: true
            });

        }

        directionsService.route({
          origin: {lat: 41.85, lng: -87.65},
          destination: {lat: 49.3, lng: -123.12},
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }

    }