why ionic 3 google map with lat lang is not loading on android

Question

Why my google map is not appearing in on android device.

I'm able console.log(); lat, lang in browser. device will ask permission for location access but it will not render map.

below code works fine for predefined lat, lang

 ionViewDidLoad() {
    console.log('ionViewDidLoad GoogleMapTestPage');
   this.loadMapHandler();    

  }

    loadMapHandler() {

      //console.log(lat,lang);

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

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



     // create CameraPosition 
     let position: any = {
       target: LatLng,    
       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: LatLng,
            title: 'Ionic'
        };

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


      }

The above code works fine on android

when i try to get current location of user and and pass lat, lang to another

function then i will not work

below is my code which is not working

code not working on android: ask permission but doesn't work

    import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation';
     constructor(...,public googleMaps: GoogleMaps,private geolocation : Geolocation) {
      }

  ionViewDidLoad() {

   this.loadMap();    

  }
    loadMap(){

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

           this.loadMapHandler(position.coords.latitude,position.coords.longitude);       


        }, (err) => {
          console.log(err);             
        });
    }

    loadMapHandler(lat,lang) {

      console.log(lat,lang);  // console.log('is giving map co-ordinates');

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

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

     let ionic: LatLng = new LatLng(lat,lang);  

     // create CameraPosition 
     let position: any = {
       target: LatLng,    
       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: LatLng,
            title: 'Ionic'
        };

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

    }

Thanks in Advance!!!

you dont seem to be calling `loadMap` function in ionViewDidLoad in the second snippet — Suraj Rao, Nov 17 '17 at 06:33
@SurajRao, sorry i editing i messed up with my real code, i will edit now — Goutham Ggs, Nov 17 '17 at 06:35
@SurajRao, is there any way to run ionic native functionality online — Goutham Ggs, Nov 17 '17 at 06:37
I also dont see where you are using `let ionic: LatLng = new LatLng(lat,lang);`.. You may want to grab a cup of coffee and debug your code first. — Suraj Rao, Nov 17 '17 at 06:40
Copy/paste the exact code that you tested. Anything else is a waste of everyone's time. If you continually make changes to code in a question, some might think that you are misusing SO contributors as an incremental code writing/testing/debugging tool:( — Martin James, Nov 17 '17 at 10:46

QuickSort · Answer 1 · 2017-11-17T06:54:02.623

If you are using the GoogleMaps plugin I would recommend to use the built-in function:

    this.mapElement = document.getElementById('map');
    let mapOptions: GoogleMapOptions = {
    };

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

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {

this.map.getMyLocation().then((myLocation: MyLocation) => {
      this.map.setCameraTarget(myLocation.latLng);
      this.map.setCameraZoom(18);
    });

And you are fine.

UPDATE:

    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: LatLng,
            title: 'Ionic'
        };

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


map.getMyLocation().then((myLocation) => {
      map.setCameraTarget(myLocation.latLng);
      map.setCameraZoom(18);
    });

      }

Using your first solution with adding the map.getMyLocation() part should work fine.

score 0 · Answer 2 · answered Nov 17 '17 at 17:38

Please use @ionic-native/core@4.4.0 and @ionic-native/google-maps@4.4.0

$> npm uninstall @ionic-native/core @ionic-native/google-maps

$> npm install @ionic-native/core@4.4.0 @ionic-native/google-maps@4.4.0

Then replace your code like this:

import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation';

class MapPage {
  map: GoogleMap;

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

  ionViewDidLoad() {

   this.loadMap();    

  }

  loadMap(){

    this.geolocation.getCurrentPosition()
      .then((position) => {
        console.log('--->step1 clear');

        this.loadMapHandler(position.coords.latitude,position.coords.longitude);


      })
      .catch((err) => {
        console.log(err);
      });
  }

  loadMapHandler(lat,lang) {

    console.log('step2', lat,lang);  // console.log('is giving map co-ordinates');

    let position: ILatLng = {
      lat: lat,
      lng: lang
    };

    this.map = GoogleMaps.create('map', {
      camera: {
        target: position, 
        zoom: 18,
        tilt: 30
      }
    });

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

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

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

why ionic 3 google map with lat lang is not loading on android

2 Answers2