Nasty bug when trying to implement native GMap functionality

[jgw96]

From @eliehamouche on December 27, 2016 13:16

Ionic version: (check one with "x")
[ ] 1.x
[x] **2.0.0-rc.4

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I'm getting this unexpected bug when I implement a native google maps on a page:
http://imgur.com/a/tKOAX
Expected behavior:
I expected to see a map with a marker

Related code:
map.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="home">

  <h1>hi</h1>
  <div style="height: 300px; height: 100%; width: 100%; background-color: #999;" #map id="map"></div>

</ion-content>

map.ts:
import {Component} from "@angular/core";

import {
GoogleMap,
GoogleMapsEvent,
GoogleMapsLatLng,
CameraPosition,
GoogleMapsMarkerOptions,
GoogleMapsMarker
} from 'ionic-native';

@component({
templateUrl: 'map.html'
})
export class MapPage {
constructor() {}

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

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

let map = new GoogleMap(element);

// listen to MAP_READY event
map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));

// create LatLng object
let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);

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

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

// create new marker
let markerOptions: GoogleMapsMarkerOptions = {
  position: ionic,
  title: 'Ionic'
};

map.addMarker(markerOptions)
  .then((marker: GoogleMapsMarker) => {
    marker.showInfoWindow();
  });

}
}

Other information:
I'm running the application on an ios simulator

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.2 Build version 8C38

Copied from original issue: ionic-team/ionic-framework#9803

[michaelyuen]

While I'm having a different issue, I'm not able to reproduce this with my environment.

Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v6.4.0
Xcode version: Xcode 7.3.1 Build version 7D1014

The main differences I see are ios-deploy, OS, and Xcode. Also, I run on my device; emulator doesn't seem to boot up (or it just takes so long I lose patience).

---

I think it's also worth noting that your code, which is from the documentation example, doesn't work for me either. I believe it has to do with the timing of execution. I just dropped the google maps code in the constructor, wrapped in platform.ready().then(() => { }. Then everything loads up and I just have a different issue. Hope this helps.

[guillenotfound]

I'm not 100% sure, but could be solved by: ionic-team/ionic-framework#9726