Google Maps working in browser, but not device

Ionic Framework ionic-v3
1

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.

Thanks

map.ts

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

@Component({
  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) {
    this.map = null;
    this.loadMap();
  }

  loadMap() {
    this.nav.present(this.loading);
    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
      };

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

      this.map.addListener('click', (event) => {
        this.addMarker(event.latLng);
      });

      this.loading.dismiss();

    });
  }

  addInfoWindow(marker, content: string) {
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });
    google.maps.event.addListener(marker, 'click', function () {
      infoWindow.open(this.map, marker);
    })
  }

  addMarker(location) {
    if (!location) {
      location = this.map.getCenter();
    }
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: location
    });

    this.markers.push(marker);

    let content: string = 'remove';
    this.addInfoWindow(marker, content);
  }

  deleteAllMarkers() {
    this.clearMarkers();
    this.markers = [];
  }

  undoLastMarker() {
    let marker = this.markers.pop()
    if (marker) {
      marker.setMap(null);
    }
  }

  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);
    }
  }

  clearMarkers() {
    this.setMapOnAll(null);
  }

}

map.html

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon></button>
    <ion-title>Map</ion-title>
    <ion-nav-items>
      <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-nav-items>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div id="map"></div>

</ion-content>

index.html

  <!-- 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="http://maps.google.com/maps/api/js?sensor=true"></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 https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
1 Like
2

You should use a API Key and delete the sensor

3

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

4

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
5

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

> <script src="http://maps.google.com/maps/api/js?key=<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?

6

SOLVED:

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

> cordova plugin add cordova-plugin-geolocation