import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation';


import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';


@IonicPage()
@Component({
  selector: 'page-google-map-test',
  templateUrl: 'google-map-test.html',
})

export class GoogleMapTestPage {

  constructor(...,public googleMaps: GoogleMaps,private geolocation : Geolocation) {
  }

 ionViewDidLoad() {
    this.mapHandler2();
  }


  mapHandler2(){

    // create a new map by passing HTMLElement
     let element: HTMLElement = document.getElementById('map');

     let map: GoogleMap = this.googleMaps.create(element);

     let LatLang: LatLng = new LatLng(43.0741904,-89.3809802);


          // create CameraPosition
       let position: any = {
          target: LatLang,
          zoom: 18,
          tilt: 30
       };


        map.one(GoogleMapsEvent.MAP_READY).then(() => {
         console.log('Map is ready!');
         // Now you can add elements to the map like the marker
          map.moveCamera(position);

         // create new marker
        let markerOptions:any = {
            position: LatLng,
            title: 'Ionic'
        };

        const marker:any = map.addMarker(markerOptions)
            .then((marker: Marker) => {
                marker.showInfoWindow();
            });


         this.geolocation.getCurrentPosition().then((position) => {

             let LatLang: LatLng = new LatLng(position.coords.latitude,position.coords.longitude);


              map.setCameraTarget(LatLang);
              map.setCameraZoom(18);


                 // create new marker
                  let markerOptions:any = {
                      position: LatLng,
                      title: 'You Are Here'
                  };

                const marker:any = map.addMarker(markerOptions)
                      .then((marker: Marker) => {
                          marker.showInfoWindow();
                  });


          }, (err) => {
            console.log(err);
            alert('location error');
          });



        });  // End of GoogleMapsEvent.MAP_READY

  }

}