CODEWITHSUNDEEP
google-mapscordovagoogle-maps-api-3ionic2
saperlipopette
saperlipopette

Reputation: 1693

Google Map not showing with Ionic 2 native google-maps plugin

I am trying to embed a google map on my Ionic 2 app, but the map is not showing. I took the code from https://ionicframework.com/docs/native/google-maps/ Here is my code :
home.html

<ion-content>
  <div id="map_canvas" class="map"></div>
  <button ion-button (click)="loadMap()"></button>
</ion-content>


home.ts

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 appService: AppService,
              public apiService: ApiService,
              public util: Util,
              private geolocation: Geolocation,
              private googleMaps: GoogleMaps
            ) {
  }

loadMap() {

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create('map_canvas', 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');
                    });
              });

        });
  }

As mentioned I installed the plugin with these 2 commands : 

ionic plugin add cordova-plugin-googlemaps
npm install --save @ionic-native/google-maps

Of course I specified my Android and iOS API keys.

From the package.json, @ionic-native/google-maps version 4.3.3 and the cordova-plugin-googlemaps version is 2.1.1

When my page loads, I have my div which is blank. When I trigger the little button to load the map, I have a console log saying "Map is ready", no error, and my requests are present on the API console

enter image description here

There is not the shape of the map, there is no Google logo, there is just a blank screen, nothing loads.

Thank in advance for any help !

Upvotes: 3

Views: 2023

Answers (1)

aaa
aaa

Reputation: 858

To add Ionic Native to your app, run following command to install the core package:

npm install @ionic-native/core --save

Keep in mind that many ionic Native Plugins only works with real device. It will not work if you run on web.

You can check this up for more information about using google map with ionic 2.

Upvotes: 2

Related Questions