Google Maps working in Ionic 2 beta 11

Ionic Framework ionic-v3
1

I tried some projects working with Google Maps in Ionic 2 but don’t work fine for me. I think that is for my version of Ionic, I’m working with beta 11 so… Has Somebody worked with Google Maps in Ionic 2 beta 11 and working fine? Thanks in advance.

Best regards.

2

I tried to update an app which is using google maps to beta11 and it is still working.
Do you have any error ? Any fail ?

3

Thanks for reply me mvrc. I don’t have error but I can’t see anything in my screen, all is white (using google chrome and my smartphone Android). My code is like this:

home.html
<ion-header>
<ion-navbar>
<ion-title>
Map
</ion-title>
<ion-buttons end>

  <button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>

</ion-buttons>
</ion-navbar>
</ion-header>

<ion-content>
<div #map id="map"></div>
</ion-content>

home.ts
import {Component, ViewChild, ElementRef} from ‘@angular/core’;
import {NavController} from ‘ionic-angular’;

declare var google;

@Component({
templateUrl: ‘build/pages/home/home.html’
})
export class HomePage {

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

constructor(public navCtrl: NavController) {

}

ionViewLoaded(){
this.loadMap();
}

loadMap(){

let latLng = new google.maps.LatLng(-34.9290, 138.6010);

let mapOptions = {
  center: latLng,
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

}
}

home.scss
.scroll {
height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

and I add this line in my index.html
<script src="http://maps.google.com/maps/api/js"></script>

Do you know how to solve it?
Thanks in advance!

4

Do you have added your api key ?
https://maps.googleapis.com/maps/api/js?key=[replacewithyourkey]&libraries=places

And in your developper console (f12 with chrome) do you have any warning ? error ?

5

Well, I didn’t have any key because was a warning and I saw that wasn’t obligatory. Now I have a key and now in my index.html :

Now I don’t have warning and error. Only one warning: “Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator” .
My screen continuous white :S

6

Well, now using Google Chrome works fine (Problem with my scss), In my smartphone Android has worked only once, after that screen white. Perhaps it is because of the key? I don’t know…

image
Pantallazo_Mapa.png1080×1920 33.1 KB

7

I don’t know what is the problem.
Maybe with some cordova plugins (like whitelist…).

You should try to run it on android with livereload and console logs (ionic run android -l -c) to see what’s the error on your phone.

8

Still having a blank map?
Using the Google Maps javascript sdk, I solved a blank map problem adding <uses-permission android:name="android.permission.INTERNET" /> to the AndroidManifest.xml