Ionic 3 GoogleMaps problem

Ionic Framework ionic-v3
1

Hello,

I’m trying to add a Google Maps on my project and it works when i run it on my mobile but not working on localhost (blank page). Is it working only on devices ?

Thanks

home.ts

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

@Component({
    selector: 'page-home',
    templateUrl: 'home.html',
})
export class HomePage {
    map: GoogleMap;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        //private platform: Platform
    ) {
        /*this.platform.ready().then(
            () => {
                this.loadMap();
            }
        );*/
    }

    ngAfterViewInit() {
        this.loadMap();
    }

    loadMap() {
        let element : HTMLElement = document.getElementById("map");
        let mapOptions: GoogleMapOptions = {
            camera: {
                target: {
                    lat: 43.0741904,
                    lng: -89.3809802
                },
                zoom: 18,
                tilt: 30
            }
        };

        this.map = GoogleMaps.create(element, mapOptions);

        // Wait the MAP_READY before using any methods.
        this.map.one(GoogleMapsEvent.MAP_READY)
            .then(() => {
                console.log('Map is ready!');

                // Now you can use all methods safely.
                this.map.addMarker({
                    title: 'Ionic',
                    icon: 'blue',
                    animation: 'DROP',
                    position: {
                        lat: 43.0741904,
                        lng: -89.3809802
                    }
                })
                    .then(marker => {
                        marker.on(GoogleMapsEvent.MARKER_CLICK)
                            .subscribe(() => {
                                alert('clicked');
                            });
                    });
            });
    }
}

home.html

<ion-header>
  <ion-navbar color="dark">
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="main-content">
  <div id="map"></div>
</ion-content>

home.scss

page-home {
  ion-app._gmaps_cdv_ .nav-decor{
    background-color: transparent !important;
  }

  #map{
    height: 100%;
  }
}

app.module.ts

import {GoogleMaps} from "@ionic-native/google-maps";

...

  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AngularFireAuth,
    AuthenticationService,
    GeolocationService,
    Geolocation,
    GoogleMaps
  ]
2

Yes, the native plugin only works on device.
If you want to use Google Maps on the browser, you need to use the Google Maps Javascript SDK.

3

Ok I understand. Thank you :slightly_smiling_face:

4

Hello,

Is it normal that when i run my app on another pc, the map doesn’t show… It seems to work only on the computer in which i created Android and IOS keys.

5

You need to use the same keystore file on both computer for Android.
iOS works on any computers.