Error initMap is not a function / Google Maps

I am trying to play around with Ionic 2 Google Maps app, but can’t use the Google Map service.

I’ve been following Joshua Morony’s tutorial

But console shows me an error: Uncaught InvalidValueError: initMap is not a function

My map.ts file code:

import {Component} from '@angular/core';
import {Geolocation} from 'ionic-native';
import {NavController} from 'ionic-angular';

  templateUrl: 'build/pages/map/map.html'
export class MapPage {

private map: any;

constructor(private navCtrl: NavController) { = null;



  initMap() {
	let options = {timeout: 10000, enableHighAccuracy: true};

	Geolocation.getCurrentPosition(options) => {

		let latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

		let mapOptions = {
			center: latlng,
			zoom: 10,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		} = new google.maps.Map(document.getElementById("map"), mapOptions);



My index.html code:

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <meta name="format-detection" content="telephone=no">
      <meta name="msapplication-tap-highlight" content="no">

      <link ios-href="build/css/app.ios.css" rel="stylesheet">
      <link md-href="build/css/" rel="stylesheet">
      <link wp-href="build/css/app.wp.css" rel="stylesheet">

      <!-- This is Ionic's root component, where the app will load -->
      <!-- Google Maps -->
      <script src=""
async defer></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>



What have I done wrong?

‘getCurrentPosition’ use promise. so require using ‘then’.
for example.

Geolocation.getCurrentPosition().then((resp) => {

And for using cordova-plugin-googlemaps. you should import this native plugin.

So I think you should write and test step by step. (And maybe this video is old)


1 Like

That video is super old, try the text version instead (it has been updated more recently):

Thank you! It solved my problem with displaying Google Maps, though there’s the same error in console:
Uncaught InvalidValueError: loadMap is not a function

UPD The error appears because of async attribute in index.html Google Maps script. Having removed the async attribute you no longer get the error in the console.

1 Like