Google map js

—- PROBLEM WITH GOOGLE MAP NATIVE FOR NEW LOCATION OR DRAG TO ADD NEW MARKER —

ADD MARKER

https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/844

https://github.com/zyra/ionic-native-playground/blob/ionic-native-1577/src/pages/google-maps/google-maps.ts#L17-L29

https://github.com/ionic-team/ionic-native/issues/1577

Ionic Native Google Maps app example

 

——— WORKING CODE GOOGLE MAP JS FOR PLACE ID, CURRENT LOCATION ——

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';

declare var google;

@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage {night_club

  @ViewChild('searchBar', { read: ElementRef }) searchBar: ElementRef;
  searchOpen: boolean = true;
  searchBox: any;
  query: string = '';
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  currentPosition: any;
  currentMarker: any;
  places = [];
  infoWindow: any;
  placeService;

  constructor(private navCtrl: NavController, private geolocation: Geolocation, private db: AngularFireDatabase, private platform: Platform, private nearby: NearbyProvider) {
  }

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

  ionViewDidLoad() {
    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 google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    }).catch(error => {
      // Default current position to vancouver
      return new google.maps.LatLng(49.2827, -123.1207);
    }).then(latLng => {
      this.currentPosition = latLng;
      this.platform.ready().then(() => {
        let mapOptions = {
          center: this.currentPosition,
          zoom: 17
        };
        this.infoWindow = new google.maps.InfoWindow();
        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
        this.placeService = new google.maps.places.PlacesService(this.map);
        google.maps.event.addListenerOnce(this.map, 'tilesloaded', () => {
          this.currentMarker = new google.maps.Marker({
            icon: 'assets/images/marker-current.png',
            position: this.currentPosition,
            clickable: false,
            map: this.map
          });
          this.loadNearby();
        });
        google.maps.event.addListener(this.map, 'click', (event) => {
          if (event.placeId) {
            this.placeService.getDetails({placeId: event.placeId}, (place, status) => {
              if (status === 'OK') {
                this.db.object('/locations/' + event.placeId).valueChanges().take(1).subscribe(data => {
                  this.infoWindow.close();
                  this.infoWindow.setPosition(place.geometry.location);
                  if(data) {
                    this.infoWindow.setContent('<div><strong><a href="/#/home/map/location/' + place.place_id + '">' + place.name + '</a></strong><br>' +
                      'Reviews: ' + data['reviewsCount'] + '<br>' +
                      'Rating: ' + data['reviewsAvg'] + '<br>' +
                      (place.formatted_address || '') + '</div>');
                  } else {
                    this.infoWindow.setContent('<div><strong><a href="/#/home/map/location/' + place.place_id + '">' + place.name + '</a></strong><br>' +
                    'Reviews: 0<br>' +
                    'Rating: 0<br>' +
                    (place.formatted_address || '') + '</div>');
                  }
                  this.infoWindow.open(this.map);
                });
              }
            });
          }
          event.stop();
        });
      });
    });
  }

  loadNearby() {
    console.log('loadNearby', this.nearby.getPlaceType());
    this.placeService.nearbySearch({
      bounds: this.map.getBounds(),
      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);
      });
      this.map.fitBounds(bounds)
    };
  }

  clearMarkers() {
    for (var i = 0; i < this.places.length; i++) {
      if (this.places[i].marker) this.places[i].marker.setMap(null);
    }
    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 = new google.maps.Marker({
          icon: (place.reviewsAvg > 0 && place.reviewsAvg <= 2) ? 'assets/images/marker-alert.png' : 'assets/images/marker-default.png',
          position: place.geometry.location,
          map: this.map
        });
        google.maps.event.addListener(place.marker, 'click', () => {
          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(this.map, place.marker);
        });
        this.places.push(place);
      });
    });
  }
}