Google Maps working in browser, but not device

Hi All,

I have the following implementation of Google Maps api (see below). It works perfectly when I run ionic serve and test it in a browser. However, when I do cordova build and deploy the apk to my android 6.0.1 phone, it fails. The map does not load and it hangs on the loading spinner.

If anyone has any ideas, I would appreciate the help.



import { Component } from '@angular/core';
import { Geolocation } from 'ionic-native';
import { NavController, Loading } from 'ionic-angular';
  templateUrl: 'build/pages/map/map.html',
export class MapPage {
  private map: any;
  private google: any;
  private markers = [];
  private loading: Loading = Loading.create();
  constructor(private nav: NavController) { = null;
  loadMap() {
    let options = {
      timeout: 10000,
      enableHighAccuracy: true
    Geolocation.getCurrentPosition(options).then((position) => {
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }; = new google.maps.Map(document.getElementById("map"), mapOptions);'click', (event) => {
  addInfoWindow(marker, content: string) {
    let infoWindow = new google.maps.InfoWindow({
      content: content
    google.maps.event.addListener(marker, 'click', function () {, marker);
  addMarker(location) {
    if (!location) {
      location =;
    let marker = new google.maps.Marker({
      animation: google.maps.Animation.DROP,
      position: location
    let content: string = 'remove';
    this.addInfoWindow(marker, content);
  deleteAllMarkers() {
    this.markers = [];
  undoLastMarker() {
    let marker = this.markers.pop()
    if (marker) {
  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
  clearMarkers() {


    <button menuToggle>
      <ion-icon name="menu"></ion-icon></button>
      <button (click)="addMarker()" danger>Add Marker&nbsp;<ion-icon class="ion-ios-pin"></ion-icon></button>
      <button (click)="undoLastMarker()" light>Undo&nbsp;<ion-icon class="ion-ios-undo"></ion-icon></button>
      <button (click)="deleteAllMarkers()" light>Clear&nbsp;<ion-icon class="ion-ios-trash"></ion-icon></button>
<ion-content padding>
  <div id="map"></div>


  <!-- google maps NOTE: When building production applications, you should also obtain an API key for your Google Maps integration and supply it as a parameter in the query string (i.e ?key=yourkey) -->
  <script src=""></script>

I do get the following warnings in the browser console, but I thought I only need a key in when I go live. Could this be the problem? Do I need the api key?

Google Maps API warning: NoApiKeys
Google Maps API warning: SensorNotRequired
1 Like

You should use a API Key and delete the sensor

Thanks, I will give that a try. What is sensor anyway?

The sensor parameter is no longer required, and will now be ignored if it’s used.

The parameter doesn’t impact the results. It’s a parameter that Google is required to collect for Google’s data providers who charge differently based on whether the request uses a sensor or not.

1 Like

I generated an Android key from Google’s API Manager. I add the key like this:

> <script src="<mykey>"></script>

All the warnings in the browser console have gone, but I when I deploy the APK to an Android device, I get the same problem, it just hangs.

p.s. When I access the map from a browser, I can see the traffic reporting in the Google API Manager’s Dashboards. So it looks like the key is working.

When you generate keys, Google give the options: Server key | Browser key | Android key | iOS key. I chose Android key. Is this correct for a Ionic/Cordova built apk deployed on Android?


I ran the following, and low the map loads on the device too:

> cordova plugin add cordova-plugin-geolocation