Ionic2 google maps api error

Question

I am trying to use google map in my Ionic2 application as described here , however there is a error on new google.maps.Map line as follows and so I guess I can not see map on my page:

My app.ts

import { Component, ViewChild, provide } from '@angular/core';
import { App, ionicBootstrap, Platform, Nav, Config } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import {AuthHttp, AuthConfig} from 'angular2-jwt';

import { StartPage } from './pages/start/start.component';
import { FarmList } from './pages/farmList/farmList.component';
import { Slider } from './pages/slider/slider.component';
import { ProfilePage } from './pages/profile/profile.component';

@Component({
  templateUrl: 'build/app.html',
  styleUrls: ['/app.scss'],
  providers:[
    provide(AuthHttp, {
      useFactory: (http) => {
        return new AuthHttp(new AuthConfig, http);
      },
      deps: [Http]
    })
  ]
})


export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Slider;

  pages: Array<{title: string, component: any, name: any}>

  constructor(private platform: Platform) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [

      { title: 'Start', component: StartPage , name:'home' },
      { title: 'Farms', component: FarmList, name: 'list' },
      { title: 'Profile', component: ProfilePage, name: 'contact' },
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

ionicBootstrap(MyApp,[HTTP_PROVIDERS]);

My index.html:

<body>

  <ion-app></ion-app>

  <script src="http://maps.google.com/maps/api/js"></script>
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Polyfill needed for platforms without Promise and Collection support -->
  <script src="build/js/es6-shim.min.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/Reflect.js"></script>
  <script src="build/js/zone.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>
</body>

My component:

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

@Component({
  templateUrl: 'build/pages/start/start.html'
})

export class StartPage {

    map:any

  constructor( private navController: NavController, private platform: Platform) {

    this.initializeMap();
  }

   initializeMap() {

        this.platform.ready().then(() => {
            var minZoomLevel = 12;

            this.map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: minZoomLevel,
                center: new google.maps.LatLng(38.50, -90.50),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

        });
    }   
}

My HTML:

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Start</ion-title>
</ion-navbar>


<ion-content padding class="page1">

    <div padding>
        <img src="images/icon_transperent.png" width="200"/>
    </div>

    <div id="map_canvas"></div> 

</ion-content>

My SCSS:

#map_canvas {
    width: 100%;
    height: 100%;
}

What exactly is going wrong here?

UPDATE: the complete console screenshot

UPDATE:

typings install dt~google.maps --global must be executed in project directory, otherwise it has no effect!

Answer 1

however there is a error on new google.maps.Map line as follows and so I guess I can not see map on my page:

The error you're getting is something like Cannot find name google ? if so, it's just typescript complaining about knowing nothing about a google object. That's not an error, your code should be transpiled anyway.

If you don't want to get that warning you can install the definition for google maps (so typescript can be aware of its properties and methods) by executing:

typings install google.maps --global

Something I would change in your code is:

export class StartPage {

  // remove this line, by adding private platform : Platform as a parameter
  // in the constructor already creates an instance of the platform
  // platform : any

  // I've added the private keyword to platform, remember that setting this to
  // public / private is mandatory in the constructor, and by doing that you are
  // creating a variable called platform and asigning it the Platform object by
  // Dependency Injection.
  constructor( private navController: NavController, private platform: Platform) {

    // You don't need this because of what I say in the constructor's comment.
    // this.platform=platform

    this.initializeMap();
  }

========================================

EDIT:

About the new error you've just added, I think the issue is because of the Content Security Policy you define in the index.html . Let's try adding a very permissive policy which will essentially allow us to load any resources. Depending on your application, you may look into providing a more strict policy, but an open policy is good for development:

Modify your www/index.html file to include the following meta tag:

<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src * data:; default-src * 'unsafe-eval' 'unsafe-inline'">

Ionic2 google maps api error

Question

UPDATE:

1 answers

solution1
2 ACCPTED 2016-07-05 05:09:01

Ionic2 google maps api error

Question

UPDATE:

1 answers

solution1 2 ACCPTED 2016-07-05 05:09:01

solution1
2 ACCPTED 2016-07-05 05:09:01