add-location.ts

add-location.html

<a [routerLink]="['/locations']">Back</a>
<br />
<h2 class="page-header">Add Location</h2>


<sebm-google-map [latitude]="latitude" [longitude]="ongitude">
  <sebm-google-map-marker [latitude]="latitude" [longitude]="longitude"></sebm-google-map-marker>
</sebm-google-map>
 <div class="form-group">
        <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
      </div>
<form (submit)="onAddSubmit()">
  <div class="form-group">
    <label>Title</label>
    <input class="form-control" type="text" [(ngModel)]="location.title"    name="title" required>
  </div>
  <div class="form-group">
    <label>Altitude</label>
    <input class="form-control" type="text" [(ngModel)]="location.latitude"    name="latitude" required>
  </div>
  <div class="form-group">
    <label>Longitude</label>
    <input class="form-control" type="text" [(ngModel)]="location.longitude"  value="{{lng}}"  name="longitude" required>
  </div>
  <div class="form-group">
    <label>Ouverture</label>
    <input class="form-control" type="text" [(ngModel)]="location.ouverture" name="ouverture" required>
  </div>
<!--   <div class="form-group">
    <input id="image" name="image" [(ngModel)]="image" type="file" >
  </div> -->
  <input type="submit" value="submit" class="btn btn-success">
</form>

add-location.ts

import { Component,  ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';

import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core';
import { FormControl } from "@angular/forms";
import {LocationService} from '../../services/location.service';
import {Router,ActivatedRoute,Params} from '@angular/router';

declare var google: any;


class Marker {
  constructor (

    public lat: number,
        public lng: number,
        public label?: string,

        public draggable: boolean = false) {

  }
}

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



export class  AddLocationComponent implements OnInit {
  title:any;
  ouverture:string;
  latitude:any;
  longitude:any;
   setPosition(position){
      this.location = position.coords;
      console.log(this.location);
      }

  public searchControl: FormControl;
  public zoom: number;
  // ouverture:any;
 @ViewChild("search")
  public searchElementRef: ElementRef;
  location={};


  constructor(
    private LocationService:LocationService,
    private router:Router,
   private mapsAPILoader: MapsAPILoader,
   private ngZone: NgZone,

  ) { }

  ngOnInit() {
    this.zoom = 34;
    this.latitude = 39.8282;
    this.longitude = -98.5795;



    //create search FormControl
    this.searchControl = new FormControl();

    //set current position
    this.setCurrentPosition();

    //load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
    let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
  
});
    // don't put Adress ya taieb 3 heures t7areb féha alors que béch tahsrek fel adresse
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          //get the place result
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          //verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          //set latitude, longitude and zoom
          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 12;
          console.log(this.latitude);
          console.log(this.longitude);  
        });
      });
    });
  }

  private setCurrentPosition() {
      //   if(navigator.geolocation){
      // navigator.geolocation.getCurrentPosition(this.setPosition.bind(this));
      // };
  }
    clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }
  
  mapClicked($event: any) {
    this.markers.push(new Marker (
      $event.coords.latitude,
      $event.coords.longitude
    ));
  }
  
  markerDragEnd(m: Marker, $event: any) {
    console.log('dragEnd', m, $event);
  }
  
  markers: Marker[] = [];



  onAddSubmit(){
    // let location = {
    //   title: this.title,
    //   altitude: this.altitude,
    //   longitude: this.longitude,
    //   ouverture:this.ouverture,

    // }

this.LocationService.addLocation(this.location).then((result) => {
      let id = result['_id'];
      this.router.navigate(['/locations']);
    }, (err) => {
      console.log(err);
    });
  }

    // this.LocationService.addLocation(location);

    // this.router.navigate(['locations']);
  }