Google Maps. Varios mapas en misma página en ionic v4

Hola a tod@s.

Estoy intentando crear un mapa pero que según el id que traiga de la página anterior coge los datos de una db para crear dicho mapa. Cuando se visualiza por primera vez va todo perfecto, pero si vuelvo a la página anterior para seleccionar otro enlace (bien desde el menú o con el botón atrás), los siguientes mapas cogen las coordenadas 0,0. Los datos los coge bien de la db porque el nombre y el id aparecen correctamente en la página del mapa.

He intentado eliminar el mapa para que al volver a entrar lo cree de nuevo, pero sigue cogiendo las coordenadas 0,0. Lo he intentado con:

ionViewDidLeave() {
        this.map.remove();
    }

Os dejo el código por si podéis echarme una mano:

import { Component, OnInit, ViewChild } from '@angular/core';
import { Platform, NavController, LoadingController } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, CameraPosition, LatLng, MarkerOptions, Marker, GoogleMapsMapTypeId } from "@ionic-native/google-maps";
import { mapStyle } from './mapStyle';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-vermapa',
  templateUrl: './vermapa.page.html',
  styleUrls: ['./vermapa.page.scss'],
})
export class VermapaPage implements OnInit {

    id: any;
    url = 'https://xxxxxxxxxxxx.xxx/getdatafromid.php?id=';
    dataid: any;
    public titulo: any;
    public descripcion: any;
    public direccion: any;
    public telefono: any;
    public imagen: any;
    public logo: any;
    public web: any;
    public latitud: number;
    public longitud: number;
    style = mapStyle;

    map: GoogleMap;

    constructor(public platform: Platform, public navCtrl: NavController, private route: ActivatedRoute, private googlemapas: GoogleMaps, public http: HttpClient, public loadingController: LoadingController) {}

    ngAfterViewInit() {
        this.platform.ready().then(() => {
            this.loadMap();
        });
    }

    ionViewDidLeave() {
        this.map.remove();
    }

    loadMap() {
        let opciones: GoogleMapOptions = {
            mapType: GoogleMapsMapTypeId.HYBRID,
            controls: {
                compass: false,
                zoom: true,
                myLocationButton: true,
                myLocation: true
            },
            styles: this.style
        };

        let map = GoogleMaps.create('map_canvas_' + this.id, opciones);
        map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
            let coordinates: LatLng = new LatLng(this.latitud, this.longitud);
            let position = {
                target: coordinates,
                zoom: 18
            };
            map.moveCamera(position);
            let markerOptions: MarkerOptions = {
                position: coordinates,
                icon: "assets/mapa/bar.png",
                title: this.titulo
            };
            const marker = map.addMarker(markerOptions)
                .then((marker: Marker) => {
                    marker.showInfoWindow();
                });
        })
    }

    async getDataid() {
        const loading = await this.loadingController.create({
            message: 'Cargando...'
        });
        await loading.present();
        this.http.get(this.url + this.id).subscribe(data => {
            this.dataid = data;
            loading.dismiss();
            this.titulo = this.dataid[0].titulo;
            this.descripcion = this.dataid[0].descripcion;
            this.direccion = this.dataid[0].direccion;
            this.telefono = this.dataid[0].telefono;
            this.imagen = this.dataid[0].imagen;
            this.logo = this.dataid[0].logo;
            this.web = this.dataid[0].web;
            this.latitud = this.dataid[0].latitud;
            this.longitud = this.dataid[0].longitud;
        })
    }

    ngOnInit() {
            this.id = this.route.snapshot.paramMap.get('id');
            this.getDataid();
    }
}

Gracias y salu2.-

Me respondo yo mismo, y por si le ocurriese alguna vez a alguien.
He eliminado el ngAfterViewInit e ionViewDidLeave (cada mapa tiene un id diferente), y la carga del mapa la hago después de obtener los datos. El problema sería, posiblemente, que el mapa cargaba pero los datos no habían cargado aún completamente.

async getDataid() {
        const loading = await this.loadingController.create({
            message: 'Cargando...'
        });
        await loading.present();
        this.http.get(this.url + this.id).subscribe(data => {
            this.dataid = data;
            //loading.dismiss();
            this.titulo = this.dataid[0].titulo;
            this.descripcion = this.dataid[0].descripcion;
            this.direccion = this.dataid[0].direccion;
            this.telefono = this.dataid[0].telefono;
            this.imagen = this.dataid[0].imagen;
            this.logo = this.dataid[0].logo;
            this.web = this.dataid[0].web;
            this.latitud = this.dataid[0].latitud;
            this.longitud = this.dataid[0].longitud;
            loading.dismiss();
            this.loadMap();
        })
    }

Una última cuestión, cómo selecciono el tipo de mapa HYBRID? Lo que tengo en opciones para seleccionar el tipo de mapa no funciona.

Un saludo.