Google Map not showing the right place

Ionic Native
1

After install the GoogleMap native plugin, I have been able to load map on the device.
But something is not quite right. When I go into the map page for the first time, the Google Map not showing the right Latitude and Longitude.
If I click Back to other page, then go into this map page again, it is showing correctly.
image
image

My system information:

global packages:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.3.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : android 6.2.3 ios 4.4.0
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v8.0.0
OS         : OS X El Capitan
Xcode      : Xcode 8.2.1 Build version 8C1002 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13

my-map.ts

// functions
  ngAfterViewInit() {
    this.loadMap();
    console.log("Map is loading....");
  };

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

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

        // listen to MAP_READY event
        // You must wait for this event to fire before adding something to the map or modifying it in anyway
        map.one(GoogleMapsEvent.MAP_READY).then(
          () => {
            console.log('Map is ready!');
            // Now you can add elements to the map like the marker
            
          }
        );


        // create LatLng object
        let myMap: LatLng = new LatLng(1.8340214, 102.9127147);

        // create CameraPosition
        let position: CameraPosition = {
          target: myMap,
          zoom: 13,
          tilt: 30
        };

        // move the map's camera to position
        map.moveCamera(position);

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

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

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

The function map.one(GoogleMapsEvent.MAP_READY) is not trigger.
Please help.

2

I am newbie at ionic, somebody helps and thank you.

3

Read this comment, understand it and move your code to “add elements … like the marker” there.

(And stop bumping your posts - this is considered impolite here. Thanks.)

1 Like
4

Thanks for your help, and sorry for bumping this post.