AddMarker not loading on First Time in Ionic 2

Question

Could anyone please tell me that what is wrong in my code that when I load google map in my ionic 2 app, the marker doesn't appear in the first time. It loads when I load the map for the second time or after that.

how the google map will show the path between the user location and marker location.

export class Map implements OnInit {

map:GoogleMap;
  constructor(public navCtrl: NavController, public navParams: NavParams,private googleMaps: GoogleMaps) {}

 ngOnInit() {
 this.loadMap()}

loadMap() {

 let location : LatLng = new LatLng(xxxxx,yyyyyy); 
 const markerOptions: MarkerOptions = {
   position: location, 
   title: 'Dubai'
 };





this.map = new GoogleMap('map', {
          'backgroundColor': 'white',
          'controls': {
            'compass': true,
            'myLocationButton': true,
            'indoorPicker': true,
            'zoom': true
          },
          'gestures': {
            'scroll': true,
            'tilt': true,
            'rotate': true,
            'zoom': true
          },
          'camera': {
            'latLng': location,
            'tilt': 30,
            'zoom': 15,
            'bearing': 50
                    },
        });
this.map.addMarker(markerOptions).then(data => {data.showInfoWindow();});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => console.log('Map is ready!'));

}
}

Answer 1

Check my solution here https://github.com/driftyco/ionic-native/issues/1444

I used native google maps from https://ionicframework.com/docs/native/google-maps/

Here is the code I used

import { Component,  AfterViewInit } from '@angular/core';
import { NavController } from 'ionic-angular';

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

import { GoogleMapsLatLng } from 'ionic-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements AfterViewInit  {

    map: GoogleMap;

    constructor(public navCtrl: NavController) 
    {

    }

    // Load map only after view is initialized
    ngAfterViewInit() {
        this.loadMap();
    }

    loadMap() 
    {
         // make sure to create following structure in your view.html file
         // and add a height (for example 100%) to it, else the map won't be visible
         // <ion-content>
         //  <div #map id="map" style="height:100%;"></div>
         // </ion-content>
        let location = new GoogleMapsLatLng(-34.9290,138.6010);

        this.map = new GoogleMap('map', {
          'backgroundColor': 'white',
          'controls': {
            'compass': true,
            'myLocationButton': true,
            'indoorPicker': true,
            'zoom': false
          },
          'gestures': {
            'scroll': true,
            'tilt': true,
            'rotate': true,
            'zoom': true
          },
          'camera': {
            'latLng': location,
            'tilt': 0,
            'zoom': 15,
            'bearing': 50
          }
        });

        this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() =>
        {
            console.log('Map is ready!');
            this.map.addMarker({
                'position': location,
                'visible': true,
                'title': "nesto",
                'markerClick': function(marker) {
                    marker.showInfoWindow();
                }
            });

        });
     }

}