Google Map & Geolocation


#1

Hi all,
first of all Happy New Year.
I would like to ask you something about native google map and geo location.
I’m implementing an app with these plugins:

com.googlemaps.ios 2.1.1 "Google Maps SDK for iOS"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-googlemaps 1.4.0 "phonegap-googlemaps-plugin"
cordova-plugin-mauron85-background-geolocation 2.2.5 "CDVBackgroundGeolocation"
cordova-plugin-network-information 1.3.1 "Network Information"
cordova-plugin-splashscreen 4.0.1 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 “Keyboard”

and I configured the CSV like this:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">

The problem is:

  • the app always prompt to “Use current Location” entering to map page
  • The map doesn’t show the buttons rightly

What’s the problem?
Thank you so much.


#2

You mean the “next” and “back” buttons? What does your code look like and we might be able to help you a bit better.


#3

Nope, my question is about the lack of button in the map and how can I hide the popup that was shown everytime I restart the app (or at least change the message).

I didn’t attach any code because this is due to the plugins. The page is:

    <ion-slide>
      <ion-row style="height:85%">
        <ion-col style="height:100%">
              <div #pleaseConnect id="please-connect">
                <p>{{ "pleaseconnect" | translate }}</p>
              </div>
              <div #map id="map"></div>
          </ion-col>
      </ion-row>
      <ion-grid style="height:90%" no-padding>
        <ion-row style="height:90%">
          <ion-col style="height:100%">
              <div #pleaseConnect id="please-connect">
                <p>{{ "pleaseconnect" | translate }}</p>
              </div>
              <div #map id="map"></div>
          </ion-col>
        </ion-row>
        <ion-row no-padding style="background-color: #999;height:10%;">
          <ion-col no-padding>
            {{newevent.where.name}}
          </ion-col>
        </ion-row>
      </ion-grid>
      <ion-footer no-border>
        <ion-toolbar>
          <ion-row>
          <ion-col padding>
              <button  ion-button full small round icon-left color="light" (click)="goPrevSlide()">
                <ion-icon name="arrow-dropleft-circle"></ion-icon> Back
              </button>
          </ion-col>
          <ion-col padding>
              <button ion-button full small round icon-right color="blue" (click)="goNextSlide()">
                Next <ion-icon name="arrow-dropright-circle"></ion-icon>
              </button>
          </ion-col>
        </ion-row>
        </ion-toolbar>
      </ion-footer>
    </ion-slide>
    <ion-slide>

The component is:

    ionViewDidLoad(){
    let isPublic = this.navParams.get('public');
    this.newevent.public = isPublic;
    this.platform.ready().then(() => {
        let mapLoaded = this.maps.init(this.mapElement.nativeElement, 
                                 this.pleaseConnect.nativeElement);
    });
 
  }

And the provider that create the map is:

    import { NgZone, Injectable } from '@angular/core';
    import { Geolocation, GoogleMap, GoogleMapsLatLng, GoogleMapsEvent} from 'ionic-native';
    import 'rxjs/add/operator/filter';
    import { ConnectivityService } from '../../../app/shared/services/connectivity-service';
    import { TrackComponent } from './tracking-provider';

    declare var google;

    @Injectable()
    export class GoogleMapProvider {
        apiKey: any = "AIzaSyCCgG0RA56obfSHAMd4eyVt0_UIlyH3yK8";
        mapElement: any;
        pleaseConnect: any;
        map: GoogleMap;
       mapInitialised: boolean = false;
       mapLoaded: any;
       mapLoadedObserver: any;
       markers: any = [];
       geocoder;
       public position:any;

      constructor(public connectivityService: ConnectivityService, public zone: NgZone, 
                   public   trackComponent:TrackComponent) {}

      init(mapElement: any, pleaseConnect: any): Promise<any> {
         this.mapElement = mapElement;
         this.pleaseConnect = pleaseConnect;
         return this.loadGoogleMaps();
  
       }

      loadGoogleMaps(): Promise<any> {
        return new Promise((resolve) => {
           if(typeof google == "undefined" || typeof google.maps == "undefined"){
             console.log("Google maps JavaScript needs to be loaded.");
             this.disableMap();
             if(this.connectivityService.isOnline()){
               window['mapInit'] = () => {
                 this.initMap().then(() => {
                   resolve(true);
                 });
                this.enableMap();
            }
            let script = document.createElement("script");
            script.id = "googleMaps";
            if(this.apiKey){
              script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';
            } else {
              script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';       
            }
            document.body.appendChild(script);  
          } 
        }
        else {
          if(this.connectivityService.isOnline()){
            this.initMap();
            this.enableMap();
          }
          else {
            this.disableMap();
          }
        }
        this.addConnectivityListeners();
 
      });
     }

    initMap(): Promise<any> {
    this.mapInitialised = true;
    let self=this;
    return new Promise((resolve) => {
      let options = {timeout:10000, enableHighAccuracy:true};
      Geolocation.getCurrentPosition(options).then((position) => {
        let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        let mapOptions = {
          compass: true,
          myLocationButton: true,
          indoorPicker: true,
          zoomControl: true,
          center: latLng,
          zoom: 3,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
 
        this.map = new google.maps.Map(this.mapElement, mapOptions);
        resolve(true);
 
    });
 
    });
 
  }
 
  disableMap(): void {
    if(this.pleaseConnect){
      this.pleaseConnect.style.display = "block";
    }
  }
 
  enableMap(): void {
    if(this.pleaseConnect){
      this.pleaseConnect.style.display = "none";
    }
  }
 
  addConnectivityListeners(): void {
    document.addEventListener('online', () => {
      console.log("online");
      setTimeout(() => {
        if(typeof google == "undefined" || typeof google.maps == "undefined"){
          this.loadGoogleMaps();
        } 
        else {
          if(!this.mapInitialised){
            this.initMap();
          }
          this.enableMap();
        }
      }, 2000);
    }, false);
 
    document.addEventListener('offline', () => {
      console.log("offline");
      this.disableMap();
    }, false);
  }
 
  addMarker(lat:number, lng:number): void {
    var self = this;
    let latLng = new google.maps.LatLng(lat, lng);
    self.setPosition(lat,lng);
    let marker = new google.maps.Marker({
      map: self.map,
      position: latLng
    });
    this.markers.push(marker);  
  }
  

  updatePosition() {
    this.trackComponent.startTracking();
    let targetPoint = new GoogleMapsLatLng(this.trackComponent.lat,this.trackComponent.lng);
    this.map.setCenter(targetPoint);
  }

  stopTrack() {
    this.trackComponent.stopTracking();
  }

  setPosition(latitude,longitude) {
    let targetPoint = new GoogleMapsLatLng(latitude,longitude);
    this.map.setZoom(17);
    this.map.setCenter(targetPoint);
  }

  geocodeAddress(address, callback) {
    let self = this;
    var pos = { address:"", lat:"", long:""};
    this.geocoder= new google.maps.Geocoder();
    this.geocoder.geocode({'address': address}, function(results, status) {
      if (status === 'OK') {
        let latitude = results[0].geometry.location.lat();
        let longitude = results[0].geometry.location.lng();
        self.addMarker(latitude, longitude);
        pos.address = address;
        pos.lat=latitude;
        pos.long=longitude;
        callback(pos);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
}

I hope this can help.
Thanks


#4

What version of Ionic are you using? I had a plugin issue yesterday after upgrading to rc5 and had to run npm i --save ionic-native@latest to get it to work. This is the thread that helped me out