# Google Maps is not showing: Ionic V3

**URL:** <https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800>\
**Category:** Ionic Native\
**Created:** [December 31, 2018, 10:54pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800 "2018-12-31T22:54:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bismarck](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@Bismarck](https://forum.ionicframework.com/u/Bismarck)\
**Post date:** [December 31, 2018, 10:54pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/1 "2018-12-31T22:54:47Z")

</div>

Hi everyone I used the Google Maps API, but when I launch my app using the android studio emulator, nothing is displayed.  
Thank you for helping me and happy new year 2019

.home.ts

```auto
import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

// Native components
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions, Marker, GoogleMapOptions }
 from '@ionic-native/google-maps';

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

  map:GoogleMap;
  constructor(public navCtrl: NavController, private googleMaps: GoogleMaps, public platform: Platform) {

    }
    
    ionViewDidLoad() {
      this.loadMap();
    
    }
  
    loadMap() {
  
   
    
  
      let mapOptions: GoogleMapOptions = {
        camera: {
           target: {
             lat: 43.0741904,
             lng: -89.3809802
           },
           zoom: 18,
           tilt: 30
         }
      };
  
      this.map = GoogleMaps.create('map_canvas', mapOptions);
    }

    
  addMarker(){

  
      let marker: Marker = this.map.addMarkerSync({
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: {
          lat: 43.0741904,
          lng: -89.3809802
        }
      });
      marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
        alert('clicked');
      });
    }
  }
  

```

.home.html

```auto
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <button {click}="addMarker()" ion-button block></button>
  <p>Hello everybody</p>
  <div id="map_canvas">
    
  </div>
</ion-content>

```

---

<div class="post-metadata">

**Author:** ![jjdev](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@jjdev](https://forum.ionicframework.com/u/jjdev)\
**Post date:** [January 1, 2019, 4:58pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/2 "2019-01-01T16:58:21Z")

</div>

Try adding some css

```auto
#map_canvas {
    height: 500px; //or any height
}

```

---

<div class="post-metadata">

**Author:** ![Bismarck](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@Bismarck](https://forum.ionicframework.com/u/Bismarck)\
**Post date:** [January 2, 2019, 10:22am UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/3 "2019-01-02T10:22:47Z")

</div>

Thank you but the problem is always the same. The screen is still white.

---

<div class="post-metadata">

**Author:** ![Stardunlap](https://avatars.discourse-cdn.com/v4/letter/s/7feea3/32.png) [@Stardunlap](https://forum.ionicframework.com/u/Stardunlap)\
**Post date:** [January 2, 2019, 11:01am UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/4 "2019-01-02T11:01:29Z")

</div>

Yes, this works for me. Keep updating

---

<div class="post-metadata">

**Author:** ![jjdev](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@jjdev](https://forum.ionicframework.com/u/jjdev)\
**Post date:** [January 2, 2019, 2:23pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/5 "2019-01-02T14:23:29Z")

</div>

you could also try wrapping your ionic-native logic in platform.ready():

```auto

onViewDidLoad() {
    this.platform.ready().then(() => {
        this.loadMap();
    });
}

```

---

<div class="post-metadata">

**Author:** ![Bismarck](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@Bismarck](https://forum.ionicframework.com/u/Bismarck)\
**Post date:** [January 2, 2019, 5:58pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/6 "2019-01-02T17:58:49Z")

</div>

thank you once again but the result is the same. the blank screen

---

<div class="post-metadata">

**Author:** ![jjdev](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@jjdev](https://forum.ionicframework.com/u/jjdev)\
**Post date:** [January 2, 2019, 7:55pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/7 "2019-01-02T19:55:48Z")

</div>

are you using 4.x.x for the ionic native packages or the 5.0.0 betas?  
if its the latter, your import must be `from '@ionic-native/google-maps/ngx';`

---

<div class="post-metadata">

**Author:** ![Bismarck](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@Bismarck](https://forum.ionicframework.com/u/Bismarck)\
**Post date:** [January 3, 2019, 6:56am UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/8 "2019-01-03T06:56:34Z")

</div>

how can I check the version of these packages?

---

<div class="post-metadata">

**Author:** ![indraraj26](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/indraraj26/32/131213_2.png) [@indraraj26](https://forum.ionicframework.com/u/indraraj26)\
**Post date:** [January 3, 2019, 8:25am UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/9 "2019-01-03T08:25:15Z")

</div>

check in package.json

---

<div class="post-metadata">

**Author:** ![Bismarck](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@Bismarck](https://forum.ionicframework.com/u/Bismarck)\
**Post date:** [January 3, 2019, 8:57am UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/10 "2019-01-03T08:57:40Z")

</div>

The version of the native packages is in version 4

```auto
  "@ionic-native/core": "^4.18.0",
    "@ionic-native/google-maps": "^4.15.1",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",

```

---

<div class="post-metadata">

**Author:** ![Philipp\_Websteps](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@Philipp\_Websteps](https://forum.ionicframework.com/u/Philipp_Websteps)\
**Post date:** [January 3, 2019, 9:46am UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/11 "2019-01-03T09:46:32Z")

</div>

have you got any debug links from the emulator or the run command?  
I would also try to add #map\_canvas to the div and not only id.

have you also added the plugin with API keys like written in the description:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/f/e/fea5092fc7f9d3ebc667cfccec0a0a31d59a45f4.png)

you could also try out the ionic google maps demo:

> **[mapsplugin/ionic-googlemaps-quickdemo](https://github.com/mapsplugin/ionic-googlemaps-quickdemo)**
>
> Demo project for ionic v3. Contribute to mapsplugin/ionic-googlemaps-quickdemo development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Bismarck](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@Bismarck](https://forum.ionicframework.com/u/Bismarck)\
**Post date:** [January 3, 2019, 10:08am UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/12 "2019-01-03T10:08:55Z")

</div>

yes I added the plugin with the API keys as shown in the picture below

---

<div class="post-metadata">

**Author:** ![jjdev](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@jjdev](https://forum.ionicframework.com/u/jjdev)\
**Post date:** [January 3, 2019, 12:18pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/13 "2019-01-03T12:18:44Z")

</div>

> [@](#):
>
> ```auto
> "@ionic-native/core": "^4.18.0",
> "@ionic-native/google-maps": "^4.15.1",
> "@ionic-native/splash-screen": "~4.17.0",
> "@ionic-native/status-bar": "~4.17.0",
> 
> ```

## from [ionic-team/ion-native-google-maps changelog](https://github.com/ionic-team/ionic-native-google-maps/blob/master/CHANGELOG.md):

> [@](#):
>
> **4.15.1**
> 
> - Fix: GoogleMaps.create() is missing.
> - Fix: BaseClass constructor is incorrect.
> 
> **4.15.0**
> 
> - Build to compatible with @ionic-native/core@4.16.0
> - Update: The code for displaying error message.
> - Fix: BaseClass is null error.

judging from this information, you could try downgrading `@ionic-native/core` version to 4.16.0

Alternatively, you could try upgrading to the 5.x.x packages

---

<div class="post-metadata">

**Author:** ![Bismarck](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@Bismarck](https://forum.ionicframework.com/u/Bismarck)\
**Post date:** [January 3, 2019, 12:46pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/14 "2019-01-03T12:46:20Z")

</div>

how can i update packages to have version 5.xx?

---

<div class="post-metadata">

**Author:** ![jjdev](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@jjdev](https://forum.ionicframework.com/u/jjdev)\
**Post date:** [January 3, 2019, 2:10pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/16 "2019-01-03T14:10:39Z")

</div>

Upon further investigation, it looks like you have to downgrade actually

Ionic v3 only supports up to Angular 5.x.x and typescript up to 2.x.x  
@ionic-native requires Angular 7.1.x and typescript 3.1.x

---

<div class="post-metadata">

**Author:** ![Bismarck](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@Bismarck](https://forum.ionicframework.com/u/Bismarck)\
**Post date:** [January 3, 2019, 3:03pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/17 "2019-01-03T15:03:01Z")

</div>

it becomes complicated. What proposal do you make for me to solve this problem definitely?

---

<div class="post-metadata">

**Author:** ![jjdev](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@jjdev](https://forum.ionicframework.com/u/jjdev)\
**Post date:** [January 3, 2019, 3:13pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/18 "2019-01-03T15:13:20Z")

</div>

try downgrading all of your `@ionic-native` package versions to `4.15.0` and reinstall npm

---

<div class="post-metadata">

**Author:** ![Bismarck](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@Bismarck](https://forum.ionicframework.com/u/Bismarck)\
**Post date:** [January 3, 2019, 3:40pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/19 "2019-01-03T15:40:40Z")

</div>

Can I have the installation commands please?

---

<div class="post-metadata">

**Author:** ![jjdev](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@jjdev](https://forum.ionicframework.com/u/jjdev)\
**Post date:** [January 3, 2019, 4:35pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/20 "2019-01-03T16:35:54Z")

</div>

```auto
"@ionic-native/core": "^4.18.0",
"@ionic-native/google-maps": "^4.15.1",
"@ionic-native/splash-screen": "~4.17.0",
"@ionic-native/status-bar": "~4.17.0",

```

becomes

```auto
"@ionic-native/core": "4.15.0",
"@ionic-native/google-maps": "^4.15.1",
"@ionic-native/splash-screen": "4.15.0",
"@ionic-native/status-bar": "4.15.0",

```

Then delete the project node\_modules folder and run  
`$ npm install` from the project root

---

<div class="post-metadata">

**Author:** ![Bismarck](https://avatars.discourse-cdn.com/v4/letter/b/c67d28/32.png) [@Bismarck](https://forum.ionicframework.com/u/Bismarck)\
**Post date:** [January 3, 2019, 7:38pm UTC](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800/21 "2019-01-03T19:38:08Z")

</div>

I have what you said but always the same result.

[Next page](https://forum.ionicframework.com/t/google-maps-is-not-showing-ionic-v3/151800.md?page=2)