Current working

map.js

Source : Google map – https://github.com/carvemerson/map

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/README.md

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { LocationPage } from '../location/location';
import { AngularFireDatabase } from 'angularfire2/database';
import { NearbyProvider } from '../../providers/nearby/nearby';
import { GoogleMap, GoogleMaps, GoogleMapOptions, LatLng, GoogleMapsEvent, HtmlInfoWindow } from '@ionic-native/google-maps';

declare var google;

@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage {
  @ViewChild('searchBar', { read: ElementRef }) searchBar: ElementRef;
  searchOpen: boolean = true;
  searchBox: any;
  query: string = '';
  @ViewChild('map') mapElement: ElementRef;

  map: GoogleMap;
  currentPosition: LatLng;
  currentMarker: any;
  places = [];
  infoWindow: HtmlInfoWindow<any>;
  placeService;

  constructor(private navCtrl: NavController, private geolocation: Geolocation, private db: AngularFireDatabase,
    private platform: Platform, private nearby: NearbyProvider, private googleMaps: GoogleMaps) {
      this.infoWindow = new HtmlInfoWindow();
  }

  toggleSearch() {
    this.searchOpen = !this.searchOpen;
  }

  ionViewDidLoad() {
    let latN, lngN;
    this.toggleSearch();
    const input = this.searchBar.nativeElement.querySelector('.searchbar-input');
    this.searchBox = new google.maps.places.SearchBox(input);
    this.searchBox.addListener('places_changed', () => {
      this.loadSearch();
    });
    this.geolocation.getCurrentPosition().then(position => {
      // Change to actual current location
      return new LatLng(position.coords.latitude, position.coords.longitude);
    }).catch(error => {
      // Default current position to vancouver
      return new LatLng(49.2827, -123.1207);
    }).then(latLng => {
      this.currentPosition = latLng;
      this.platform.ready().then(() => {
        let mapOptions: GoogleMapOptions = {
          camera: {
            target: {
              lat: this.currentPosition.lat,
              lng: this.currentPosition.lng
            },
            zoom: 17,
            tilt: 30
          }
        };
        
        this.map = this.googleMaps.create('map', mapOptions);
        this.placeService = new google.maps.places.PlacesService(new google.maps.Map(document.createElement('div')));

        this.map.one(GoogleMapsEvent.MAP_READY)
          .then(() => {
            this.map.addMarker({
              icon: 'assets/images/marker-current.png',
              draggable: true,
              position: {
                lat: latN ||this.currentPosition.lat,
                lng: lngN ||this.currentPosition.lng
              }
            })
            .then(marker => {
              marker.on(GoogleMapsEvent.MARKER_DRAG_END)
                .subscribe(() => {
                  latN = marker.getPosition().lat;
                  lngN = marker.getPosition().lng; 
                  console.log("Drag to new location");
                });
            });
            this.loadNearby();
          });
      });
    });
  }

  loadNearby() {
    this.placeService.nearbySearch({
      bounds: new google.maps.LatLngBounds(new google.maps.LatLng({lat: this.map.getVisibleRegion().southwest.lat, lng: this.map.getVisibleRegion().southwest.lng}), new google.maps.LatLng({lat: this.map.getVisibleRegion().northeast.lat, lng: this.map.getVisibleRegion().northeast.lng})),
      type: [this.nearby.getPlaceType()]
    }, (places, status, pagination) => {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        this.addMarkers(places);
        if (pagination.hasNextPage) {
          pagination.nextPage();
        }
      }
    });
  }

  loadSearch() {
    this.clearMarkers();
    let searchPlaces = this.searchBox.getPlaces();
    this.addMarkers(searchPlaces);
    if (this.places.length) {
      let bounds = new google.maps.LatLngBounds();
      this.places.forEach(place => {
        bounds.extend(place.geometry.location);
      });
      (<any> this.map).setBounds(bounds);
    };
  }

  clearMarkers() {
    for (var i = 0; i < this.places.length; i++) {
      if (this.places[i].marker) this.places[i].marker.remove();
    }
    this.places.length = 0;
  }

  addMarkers(places) {
    places.forEach(place => {
      this.db.object('/locations/' + place.place_id).valueChanges().take(1).subscribe(data => {
        place.reviewsAvg = data && data['reviewsAvg'] || 0;
        place.reviewsCount = data && data['reviewsCount'] || 0;
        place.marker = this.map.addMarker({
          icon: (place.reviewsAvg > 0 && place.reviewsAvg <= 2) ? 'assets/images/marker-alert.png' : 'assets/images/marker-default.png',
          position: {
            lat: place.geometry.location.lat(),
            lng: place.geometry.location.lng()
          }
        }).then(marker => {
          marker.on(GoogleMapsEvent.MARKER_CLICK)
            .subscribe(() => {
              this.infoWindow.close();
              this.infoWindow.setContent('<div><strong><a href="/#/home/map/location/' + place.place_id + '">' + place.name + '</a></strong><br>' +
                'Reviews: ' + place.reviewsCount + '<br>' +
                'Rating: ' + place.reviewsAvg + '<br>' +
                (place.formatted_address || '') + '</div>');
              this.infoWindow.open(marker);
            });
        });
        this.places.push(place);
      });
    });
  }
}

 

Getting camera position change