Google Map doesn't load when using Geolocation plugin

Ionic Native
1

Hi, sorry I’m quite new to this stuff so go easy on me.

This is my home.ts code:

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Geolocation } from ‘@ionic-native/geolocation’;
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from ‘@ionic-native/google-maps’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

map: GoogleMap;
mapElement: HTMLElement;
autocomplete: any;
address:any;
lat: any;
lon: any;

constructor(public navCtrl: NavController, private googleMaps: GoogleMaps, private geolocation: Geolocation) {
this.address = {
place: ‘’
};

    }

ionViewDidLoad() {
setTimeout(()=>{
this.loadMap();

 }, 100);

}

loadMap() {
this.mapElement = document.getElementById(‘map’);

this.geolocation.getCurrentPosition().then((resp) => {
   this.lat= resp.coords.latitude
   this.lon= resp.coords.longitude


  }).catch((error) => {
    console.log('Error getting location', error);
  });

let mapOptions: GoogleMapOptions = {
  camera: {
    target: {
      lat: this.lat,
      lng: this.lon
    },
    zoom: 18,
    tilt: 30
  }
};

this.map = this.googleMaps.create(this.mapElement, mapOptions);

// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
  .then(() => {
    console.log('Map is ready!');

    // Now you can use all methods safely.


    this.map.addMarker({
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: {
          lat: this.lat,
          lng: this.lon
        }
      })
      .then(marker => {
        marker.on(GoogleMapsEvent.MARKER_CLICK)
          .subscribe(() => {
            alert('clicked');
          });
      });

  });

}
}

Everything compiles fine but the map doesn’t load on the android emulator. When I hard code latitude and longitude values it works again. Where have i gone wrong?

2

Please edit your post, it is not very readable at the moment.
Use the </> button above the input field to format your code, command line output or error message (select the text first, then click the button or wrap it in ``` manually). Check the preview if it looks better. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.