UmerYousuf commented 5 years ago

Please help me to solve this damn problem map will working fine when run on browser but when i run on lab view or apk real device its will show a blank white screen please help to resolve this its been 3 months to find a way to solve this problem. it will very helpfull if some one help to resolve and one more thing if google allow cross origin in iframe how to implement iframe. and im also you this code

Error: Geolocation access has been blocked because of a Feature Policy applied to the current document. See goo.gl/EuHzyv for more details

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({...})
export MyApp {
  constructor(public plt: Platform) {
    this.plt.ready().then((readySource) => {

      this.getUserPosition();

    });
  }
}

Instead of this

ionViewDidEnter(){
    this.getUserPosition();
}


Map.ts

import { Component, ViewChild ,ElementRef } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation'; 

declare var google;

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

z
options : GeolocationOptions;
currentPos : Geoposition;
map: any;
places : Array<any> ;

constructor
(
    public navCtrl: NavController,
    private geolocation : Geolocation,
    public plt: Platform

    ) {}

        /*
        this.plt.ready().then((readySource) => {

            this.map = new google.maps.Map(document.getElementById('map'), {
                //this.getUserPosition();
              });
            this.getUserPosition();

                });

    } 

    */

ionViewDidEnter(){
    this.map = new google.maps.Map(document.getElementById('map'), {

        //this.getUserPosition();
      });
    this.getUserPosition();
}    

getUserPosition(){
    this.options = {
    enableHighAccuracy : false
    };
    this.geolocation.getCurrentPosition(this.options).then((pos : Geoposition) => {

        this.currentPos = pos;     
        console.log(pos);
        this.addMap(pos.coords.latitude,pos.coords.longitude);

    },(err : PositionError)=>{
        console.log("error : " + err.message);
    ;
    })
}

getGym(latLng)
{
    var service = new google.maps.places.PlacesService(this.map);
    let request = {
        location : latLng,
        radius : 3000 ,
        types: ["gym"]
    };
    return new Promise((resolve,reject)=>{
        service.nearbySearch(request,function(results,status){
            if(status === google.maps.places.PlacesServiceStatus.OK)
            {
                resolve(results);    
            }else
            {
                reject(status);
            }

        }); 
    });

}

createMarker(place)
{
    let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: place.geometry.location
    });   
}  

ionViewDidload(){
    console.log(MapPage)
}

addMap(lat,long){

    let latLng = new google.maps.LatLng(lat, long);

    let mapOptions = {
    center: latLng,
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

    this.getRestaurants(latLng).then((results : Array<any>)=>{
        this.places = results;
        for(let i = 0 ;i < results.length ; i++)
        {
            this.createMarker(results[i]);
        }
    },(status)=>console.log(status));

    this.addMarker();
}

addMarker(){

    let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter()
    });

    let content = "<p>This is your current position !</p>";          
    let infoWindow = new google.maps.InfoWindow({
    content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
    infoWindow.open(this.map, marker);
    });

}
}

Index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>ionicapp</title>
  <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">  
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/logo.png">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="js/ng-cordova.min.js"></script>
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
      }
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' gap://ready file://* *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

    </script>-->

  <link href="build/main.css" rel="stylesheet">

  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8pf6ZdFQj5qw7rc_HSGrhUwQKfIe9ICw&libraries=places"></script>

</body>
</html>

Please help to save my job how resolve this f**king problem

wf9a5m75 commented 5 years ago

@ionic-native/geolocation is not this plugin.

And the error gives you to helpful URL.

#Error: Geolocation access has been blocked because of a Feature Policy applied to the current document.
See goo.gl/EuHzyv for more details

Check out https://goo.gl/EuHzyv

UmerYousuf commented 5 years ago

@ionic-native/geolocation is not this plugin.

And the error gives you to helpful URL.
#Error: Geolocation access has been blocked because of a Feature Policy applied to the current document.
See goo.gl/EuHzyv for more details
Check out https://goo.gl/EuHzyv

I dont understand what you say i do use iframe but it won't work. what should i do please do write steps. Thanks

wf9a5m75 commented 5 years ago

Not this plug-in problem. Please ask at stack overflow.

UmerYousuf commented 5 years ago

Stackoverflow have no answer

ionic-team / ionic-native-google-maps

Geolocation access has been blocked because of a Feature Policy applied to the current document Ionic 3 #158

Error: Geolocation access has been blocked because of a Feature Policy applied to the current document. See goo.gl/EuHzyv for more details