why google map is not pointing to my current location in ionic cordova

Question

Why i'm unable to point marker on my current location. the marker is pointing to somewhere else.

here is a screenshot:

below is my complete code:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation';


import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';        

@IonicPage()
@Component({
  selector: 'page-google-map-test',
  templateUrl: 'google-map-test.html',
})

export class GoogleMapTestPage {


  constructor(...,public googleMaps: GoogleMaps,private geolocation : Geolocation) {
  }

 ionViewDidLoad() {

    this.mapHandler2();       
  }

  mapHandler2(){


              // create a new map by passing HTMLElement
     let element: HTMLElement = document.getElementById('map');

     let map: GoogleMap = this.googleMaps.create(element);

     let LatLang: LatLng = new LatLng(43.0741904,-89.3809802); 


          // create CameraPosition 
       let position: any = {
          target: LatLang,    
          zoom: 18,
          tilt: 30
       };     


        map.one(GoogleMapsEvent.MAP_READY).then(() => {
         console.log('Map is ready!');
         // Now you can add elements to the map like the marker
        //   map.moveCamera(position);

         // create new marker
        let markerOptions:any = {
            position: LatLang,
            title: 'Ionic'
        };

        const marker:any = map.addMarker(markerOptions)
            .then((marker: Marker) => {
                marker.showInfoWindow();
            });


         this.geolocation.getCurrentPosition().then((position) => {

             let LatLang: LatLng = new LatLng(position.coords.latitude,position.coords.longitude);


               map.setCameraTarget(LatLang);
               map.setCameraZoom(18);

                let defPosition: any = {
                    target: LatLang,    
                    zoom: 18,
                    tilt: 30
                 };


                map.moveCamera(defPosition);


                let markerOptions:any = {
                    position: LatLang,
                    title: 'Your Current Location'
                };

                const marker:any = map.addMarker(markerOptions)
                    .then((marker: Marker) => {
                        marker.showInfoWindow();
                  });     


          }, (err) => {
            console.log(err); 
            alert('location error');            
          });

        });

  }

}

Thinking that i'm not getting co-ordinates i changed my code like below code, which is not showing even google map

below is code:(Not Showing Anything)

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation';


import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';      


@IonicPage()
@Component({
  selector: 'page-google-map-test',
  templateUrl: 'google-map-test.html',
})

export class GoogleMapTestPage {


  constructor(...,public googleMaps: GoogleMaps,private geolocation : Geolocation) {
  }

 ionViewDidLoad() {

     this.getCurrentLocation();           
  }

  getCurrentLocation(){

             this.geolocation.getCurrentPosition().then((position) => {

             let LatLang: LatLng = new LatLng(position.coords.latitude,position.coords.longitude);

             this.mapHandler2(LatLang);

          }, (err) => {
            console.log(err); 
            alert('location error');            
          });
  }


  mapHandler2(LatLang){          


              // create a new map by passing HTMLElement
     let element: HTMLElement = document.getElementById('map');

     let map: GoogleMap = this.googleMaps.create(element);


        map.one(GoogleMapsEvent.MAP_READY).then(() => {
         console.log('Map is ready!');

               let defPosition: any = {
                    target: LatLang,    
                    zoom: 18,
                    tilt: 30
                 };


                map.moveCamera(defPosition);


                let markerOptions:any = {
                    position: LatLang,
                    title: 'Your Current Location'
                };

                const marker:any = map.addMarker(markerOptions)
                    .then((marker: Marker) => {
                        marker.showInfoWindow();
                  }); 




        });

  }

}

Answer 1

To go along with wf9a5m75's answer this is the HTML and SCSS I had. As said in the comments having the div id as map is pivotal to the GoogleMap displaying (see first line of code in the function mapHandler2). Hopefully it helps. HTML:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Location</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic GoogleMaps Demo</h3>
  <div id="map">
  </div>
</ion-content>

SCSS:

page-location {
  #map{
    height: 50%;
  }
}

My Ionic page is named Location so the you will probably need to change the first line of your scss file to properly reflect the your project.

Answer 2

Well, this is a bug of Google Maps native API(I guess you use Android). Adding a marker after camera moving should be fine.

Try like this (with @ionic-native/core@4.4.2 and @ionic-native/google-maps@4.4.2):

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation';


import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 ILatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';      


@IonicPage()
@Component({
  selector: 'page-google-map-test',
  templateUrl: 'google-map-test.html',
})

export class GoogleMapTestPage {


  constructor(...,private geolocation : Geolocation) {
  }

 ionViewDidLoad() {
     this.getCurrentLocation();
  }

  getCurrentLocation(){

    this.geolocation.getCurrentPosition().then((position) => {

      let yourPosition: ILatLng = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      this.mapHandler2(yourPosition);

    }, (err) => {
      console.log(err); 
      alert('location error');
    });
  }


  mapHandler2(yourPosition){

    let map: GoogleMap = GoogleMaps.create('map');


    map.one(GoogleMapsEvent.MAP_READY).then(() => {
      console.log('Map is ready!');

      let defPosition: any = {
        target: yourPosition,    
        zoom: 18,
        tilt: 30
      };

      map.moveCamera(defPosition).then(() => {
        let markerOptions:any = {
            position: yourPosition,
            title: 'Your Current Location'
        };
        return map.addMarker(markerOptions);
      })
      .then((marker: Marker) => {
        marker.showInfoWindow();
      });

  }

}