Google Map Not showing in ios and android in Ionic v2

Ionic Framework ionic-v3
1

Hello,
I am using the google map plugins from this link https://github.com/mapsplugin/cordova-plugin-googlemaps after successfully installed plugins, when i run on ios simulator the screen look like below

image
Screen Shot 2016-10-24 at 11.20.15 AM.png379×691 20.2 KB

My system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.9.0
Xcode version: Xcode 8.1 Build version 8T29o

My source code is:

home.ts

import { Component } from ‘@angular/core’;
import { NavController, Platform } from ‘ionic-angular’;
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, Geolocation } from ‘ionic-native’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class Home {
map: GoogleMap;
lat: number;
long: number;

constructor(public navCtrl: NavController, public platform: Platform) {
platform.ready().then(() => {
debugger;
console.log(“In Platform ready”);
this.loadMap();
});
}

loadMap() {
console.log(“In loadMap”);
debugger;
let location = new GoogleMapsLatLng(-34.9290, 138.6010);
debugger;
let mapEle = document.getElementById(‘map’);

this.map = new GoogleMap(mapEle, {
  'backgroundColor': 'white',
  'controls': {
    'compass': true,
    'myLocationButton': true,
    'indoorPicker': true,
    'zoom': true
  },
  'gestures': {
    'scroll': true,
    'tilt': true,
    'rotate': true,
    'zoom': true
  },
  'camera': {
    'latLng': location,
    'tilt': 30,
    'zoom': 15,
    'bearing': 50
  }
});
debugger;

this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
  console.log('Map is ready!');
  let coord = new GoogleMapsLatLng(this.lat, this.long);

  console.log(this.lat + ' ' + this.long);
});

}
}

in my html file there is div with id=map

home.scss

ion-app.gmaps_cdv .nav-decor{
background-color: transparent !important;
}

page-home {

#map {
    height: 100%;
}

}

i also included in index as a script src =
“http://maps.googleapis.com/maps/api/js?sensor=false”

Please help me.
Thanks you !!

2

try to use ElementRef in angular2

then create a map on that element
hope it solve your problem

3

Hey @Thavarajan, thanks for reply, Can you show me that step, please. I am new in ionic v2. Thank you

4

Dear Dipak,

instead of id create a reference with the div like this

<div #map></div>

@ViewChild('map') mapElement;
..
xxxx() {
.....
let map = new GoogleMap(mapElement);
......
}

hope it helps you

5

Hello @Thavarajan thanks for reply, there is no luck with given solution, You have any working example with new ionic configuration? i-e
My system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.9.0
Xcode version: Xcode 8.1 Build version 8T29o

6

This following post will help you

7

Got solution for it please find this link http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/