Error initMap is not a function / Google Maps

Ionic Framework ionic-v3
1

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';

@Component({
  templateUrl: 'build/pages/map/map.html'
})
export class MapPage {

private map: any;

constructor(private navCtrl: NavController) {

this.map = null;

this.initMap();

}

  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
		}

		this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
	}

     }

}

My index.html code:

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
      <meta charset="UTF-8">
      <title>Ionic</title>
      <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/app.md.css" rel="stylesheet">
      <link wp-href="build/css/app.wp.css" rel="stylesheet">
    </head>
    <body>

      <!-- This is Ionic's root component, where the app will load -->
      <ion-app></ion-app>
      <!-- Google Maps -->
      <script src="https://maps.googleapis.com/maps/api/js?key=HERE_GOES_MY_KEY_NUMBER&callback=initMap"
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>

      <p>Loading...</p>

    </body>
    </html>

What have I done wrong?

2

‘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.

http://ionicframework.com/docs/v2/native/google-maps/

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

regards.

1 Like
3

That video is super old, try the text version instead (it has been updated more recently): http://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/

4

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