Ionic 2 google map

Ionic Framework ionic-v3
1

i’m using google map into may ionic 2 app , map is inserted in AccountPage ( that page let the user choose a departure city and an arrival one then draw a road between them)

AccountPage

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';

declare var google;
declare var document;

@Component({
  selector: 'page-account',
  templateUrl: 'account.html'
})
export class AccountPage {
  start;
  end;

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(public navCtrl: NavController, public geolocation: Geolocation) {
  }
  ionViewDidLoad() {
    this.loadMap();

  }
  loadMap() {
    var directionsService = new google.maps.DirectionsService;
    
    var directionsDisplay = new google.maps.DirectionsRenderer({
          draggable: true,
          map: map,
          panel: document.getElementById('right-panel')
    });
    
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: { lat: 34.4668163, lng:10.416861 }
    });
    

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('right-panel'));

      var control = document.getElementById('floating-panel');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);


    var onChangeHandler = function () {
      directionsService.route({
        origin: document.getElementById('start').value,
        destination: document.getElementById('end').value,
        travelMode: 'DRIVING'
      }, function (response, status) {
        if (status === 'OK') {
          directionsDisplay.setDirections(response);
          
        } else {
          

  let alert = this.alertCtrl.create({
    title: 'alert',
    subTitle: ' try again'  ,
    buttons: ['close']
  });
  alert.present();

        }
      });
    };
    
    document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('end').addEventListener('change', onChangeHandler);

   

  }

}

it works fine : map is shown in browser both in android emulator , i have reused the same map id in another page StationPage ( that page have to retrieve the current user positions that owns the application and insert them into the database)

StationPage

import { Component, ViewChild, ElementRef } from ‘@angular/core’;
import { NavController,Platform } from ‘ionic-angular’;
import {Geolocation} from ‘@ionic-native/geolocation’;

import {VoitureService} from ‘…/…/providers/voitureservice’;
declare var google;

@Component({
selector: ‘page-station’,
templateUrl: ‘station.html’,
providers:[VoitureService]

})
export class StationPage {

@ViewChild(‘map’) mapElement: ElementRef;
map: any;
loader:any;

items:Array;

public itemvd: any;
public itemva: any;
public villedepart :any;
public villearrive :any;
results:Array;
lon :any;
lat:any;
platform:Platform;
constructor(public voitureservice:VoitureService,platform:Platform,public navCtrl: NavController, public geolocation: Geolocation) {
this.platform=platform;
}

ionViewDidLoad() {
this.initializeMap();

}
addInfoWindow(marker, content) {

    let infoWindow = new google.maps.InfoWindow({
        content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
        infoWindow.open(this.map, marker);
    });

}

initializeMap() {

 //   this.presentLoading();
    this.platform.ready().then(() => {
        var minZoomLevel = 6;//zoom sur la psition
        //getCurrentPosition contion votre langutude ,getCurrentPosition
        // let comme var just pour la déclaration

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

let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//let latLng = new google.maps.LatLng(35.5679484,10.5425642);
this.lon=position.coords.latitude;
this.lat=position.coords.latitude;

this.voitureservice.insertCoord(this.lon,this.lat).subscribe(response=>
{

            this.results=response;});

console.log(this.lon);

            //getElementById
            this.map = new google.maps.Map(document.getElementById('map'),
                {
                    zoom: minZoomLevel,
                    center: latLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    // ROADMAP type daffichage comme le satelite etc
                });
            let marker = new google.maps.Marker({
                map: this.map,
                animation: google.maps.Animation.DROP,
                position: latLng
            });
           //  let content pou afficher une message lorsque je pooint sur le marker
            let content = "<h4>Je suis ici!</h4>";

            this.addInfoWindow(marker, content);
          // this.getPosts();
        });
       

    });
  
}

}

for that Page map doesn't appear for  android emulator either device.What was the problem? is it impossibile to reuse the same map for many pages or an error with typescript code ??

that code is inserted in index.html ( in head)