Google Maps native not load map first time

@Hanzo wrote:

Hi,

I'm trying to use native Ionic Google Maps library with a Ionic sideMenu template.

My problem is that when the page is loaded for the first time the map is not loaded. The event of MAP_Ready is not fired.

If I change to another page and then go to the map page it works correctly

This is my template:

<ion-header>
  <ion-navbar color="centilocation">
    <button ion-button menuToggle>
      <ion-icon style="color: #ffffff" name="menu"></ion-icon>
    </button>
    <ion-title> <img style="height: 50px;" src="assets/img/logo.png"></ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
<table class="table-content">
  <tr  class="table-content-map">
    <td colspan="2" >
      <div #map id="map" style="height:100%;"></div>
    </td>
  </tr>

.....

And this is may component

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ToastController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  CameraPosition,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  user:string = "Charlott Byrd"
  location:string = "8346 Rodriguez Islands Suite 636"
  map: GoogleMap;
  constructor(public navCtrl: NavController,
              private googleMaps: GoogleMaps,
              public toastCtrl: ToastController) {


  }

// 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>

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

    this.map = 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
    this.map.one(GoogleMapsEvent.MAP_READY).then(
      () => {
        console.log('Map is ready!');
        // Now you can add elements to the map like the marker
        this.presentToast();
        this.moveCamera();
        this.addMarker();
      }
    );




  }

  moveCamera(){
    // create LatLng object
    let ionic: LatLng = new LatLng(39.478886,-0.3555931);

    // create CameraPosition
    let position: CameraPosition = {
      target: ionic,
      zoom: 18,
      tilt: 30
    };

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

  addMarker(){
    // create new marker
    let ionic: LatLng = new LatLng(39.478886,-0.3555931);
    let markerOptions: MarkerOptions = {
      position: ionic,
      title: 'Ionic'
    };
    this.map.addMarker(markerOptions)
      .then((marker: Marker) => {
        marker.showInfoWindow();
      });
  }
  presentToast() {
    let toast = this.toastCtrl.create({
      message: 'Mapa cargado',
      duration: 3000
    });
    toast.present();
  }
}

What would be doing wrong?

Posts: 1

Participants: 1

Read full topic