Home,ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, AlertController } from 'ionic-angular';
import { ModalProvider } from '../../providers/modal/modal';
import {
  RestaurantParserProvider,
  Restaurant
} from '../../providers/restaurant-parser/restaurant-parser';
import {
  GoogleMaps,
  GoogleMap
} from '@ionic-native/google-maps';

declare var google;
import {
  PAGE_TITLE_HOME,
  PAGE_INDEX_HOME
} from '../../config/constants';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  pageTitle: string = PAGE_TITLE_HOME;

  @ViewChild('map') mapElement: ElementRef;
  private map: any;

  constructor(public modalProv: ModalProvider,
              public restProv: RestaurantParserProvider,
              private googleMaps: GoogleMaps) {
  }

  ionViewDidLoad(){
    console.log('ionViewDidLoad');
    this.loadMap();
  }

  loadMap() {

    let styles = [
      {
        featureType: "poi",
         stylers: [
          { visibility: "off" }
        ]
      }
    ];

    let image = {
      labelOrigin: new google.maps.Point(25,50),
      url: '../assets/icon/marker_maps.png',
      scaledSize: new google.maps.Size(50, 50),
    };
    let latLng = new google.maps.LatLng(50.781294, 6.078578);

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true,
      styles: styles
    };

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    let locations = [
      ['Example1', 50.780834, 6.079392, 4],
      ['Example2', 50.780483, 6.078949, 5],
      ['Example3', 50.780479, 6.080323, 3],
      ['Example4', 50.781531, 6.078275, 2],
      ['Example5', 50.779247, 6.078245, 1]
    ];

    let infowindow = new google.maps.InfoWindow();

    let marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: this.map,
        animation: google.maps.Animation.DROP,
        icon: image,
        label: {
          text: locations[i][0],
          color: "orange",
          fontSize: "13px",
          fontWeight: "bold"
        }
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(this.map, marker);
        }
      })(marker, i));
    }
  }

  openRestaurantPopover(restaurant: Restaurant): void {
    this.modalProv.presentRestaurantPopover(restaurant);
  }
}