Rendering the Google map at first Stretch


#1

I have successfully integrated a Google maps in Ionic 2 application. When i load the map on the device and click on get direction it is taking only the current location. When i click on the button for the second time map is loading without any error. Please find me a suitable solution for this problem.

Code

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation'
declare var google;

@Component({
  selector: 'page-routemap',
  templateUrl: 'routemap.html'
})
export class RoutemapPage {

  Destination: any = '';
  MyLocation: any;

  constructor(public navCtrl: NavController, public navParams: NavParams,private geolocation: Geolocation ) {

  }

calculateAndDisplayRoute() {

  let that = this;

  let directionsService = new google.maps.DirectionsService;
      let directionsDisplay = new google.maps.DirectionsRenderer;

      const map = new google.maps.Map(document.getElementById('map'))
      {
        //zoom: 7,
        //center: {lat: 41.85, lng: -87.65}
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            directionsDisplay.setMap(map);

            map.setCenter(pos);
            that.MyLocation = new google.maps.LatLng(pos);
			
          }, function() {

          });
        } else {

        }

      }
	

      directionsService.route({
          origin: this.MyLocation,
          destination: this.Destination,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
		
	  
    }

  }

#2

What exactly is happening?
You didn’t post any error for the first time, but mention that the second time it is “without any error”.


#3

Thanks for your valuable reply. First time when i click on the “Get direction” Button it fetches only a current location. it wont show up with the route to the destination. When i click on the “Get direction” at the second attempt, direction to the destination will be drawn and shown in the map. So my problem is, User require to click two times “Get direction” button in order to get the direction. Kindly help me out regarding this issue


#4

@nagendra_staysimple, Are you find a solution for this issue because I have the same one.