Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Runtime Error Cannot read property 'environment' of null - Ionic Google Maps

I'm setting up my Ionic app and I've followed the Google Maps API documentation precisely. However, I have not been able to escape this error I keep getting when I try to run the Maps API:

enter image description here

And then this is my full code from the HomePage. I have made sure to put in a div in the home.html with the id="map_canvas" as well as set the height to 100% in the scss file for it. From what I've seen, the error seems to not like the Environment part, but I have made sure my API key is correct and I've run the correlating cordova commands to set up the google maps plug in. I just cannot see what could be causing this error.

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  Marker,
  Environment
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";

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

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {

    // This code is necessary for browser
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'I_ENTERED_MY_UNRESTRICTED_API_KEY_HERE',
      'API_KEY_FOR_BROWSER_DEBUG': ''
    });

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

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    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');
    });
  }
}
like image 940
Tadas Petraitis Avatar asked Oct 05 '18 02:10

Tadas Petraitis


1 Answers

You need to build it for whatever platform that you want to use (ex. browser, android, ios) using

ionic cordova build browser -l

and then this will create the environment for it and thus it will be running. It does not simply work using ionic serve

like image 171
Tadas Petraitis Avatar answered Oct 14 '22 23:10

Tadas Petraitis