CODEWITHSUNDEEP
javascriptgoogle-mapstypescriptionic2
sidharth ramanan
sidharth ramanan

Reputation: 321

Google Maps not working in Ionic 2 application

When I try to load the google maps API in my Ionic 2 Application, I get this error:

Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null TypeError: Cannot read property 'firstChild' of null at Object._.pg (http://maps.google.com/maps/api/js?key=AIzaSyBOclEsMjwSHU-ec6OoGo6BB3FM91ixnJ0:85:391) at new ug

These are my import statements :

  import { Platform, NavController, ModalController,IonicPage, NavParams } 
  from 'ionic-angular';
  import {} from '@types/googlemaps';
  import { GoogleMap,  GoogleMapsEvent, LatLng } from '@ionic-native/google-
  maps';

These are the commands I've run :

1)npm install --save @ionic-native/google-maps 2)npm install @types/google-maps --save-dev --save-exact

   <script src="http://maps.google.com/maps/api/js?key='AIzaSyBOclEsMjwSHU-
   ec6OoGo6BB3FM91ixnJ0'"></script>

was also added at the end of the tag in index.html along with all the other script references. ( as you can see, I also got an API key, and I've added it WITH and WITHOUT the single quotes and I still get the same error)

I use Sublime Text 3 and before running the application I don't see any highlighted ( underlined ) errors in the code.

Why am I getting this error and how do I fix it ?

Upvotes: 1

Views: 868

Answers (1)

Diluk Angelo
Diluk Angelo

Reputation: 1503

First of all why are you including a web script Api for the native google maps plugin?

Please follow these steps if you want to use the native google maps

Ionic Native Google Maps

And this Error occurs when the script loads before the Dom elements. Please re initiate the project and use the native google maps plugin.

If you want to use the Google Maps Js Library, Follow this tutorial

Ionic 2 how to use google maps

Thanks

Upvotes: 2

Related Questions