My first map-app errors

Ionic Framework ionic-v3
1

Hi Duds,
Happy new year, wish you all have great year.
I have this code but it is not working:

import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    import {
     GoogleMap,
     GoogleMapsEvent,
     GoogleMapsLatLng,
     GoogleMapsMarkerOptions,
     GoogleMapsMarker
    } from 'ionic-native';


    @Component({
      selector: 'page-map',
      templateUrl: 'map.html'
    })
    export class MapPage {

      constructor(public navCtrl: NavController, public navParams: NavParams) {}

     ngAfterViewInit() {
     this.loadMap();
    }

    loadMap() {

     let element: HTMLElement = document.getElementById('map');

     let map = new GoogleMap(element);
     map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));
     let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);

     let markerOptions: GoogleMapsMarkerOptions = {
       position: ionic,
       title: 'Ionic'
     };
     map.addMarker(markerOptions)
       .then((marker: GoogleMapsMarker) => {
          marker.showInfoWindow();
        });
     }

image
errors.png1366×768 120 KB
}

2

Did you tested on real device ?

3

Yes I’ve tried but there is nothing. I’ve copied this code from Ionic doc https://ionicframework.com/docs/v2/native/google-maps/ and running on android 14 (4.0.3)

image
18-50-39-782-2017-01-01.png1280×800 11.5 KB

4

Friends, Is there any other way to use map in Ionic apps?

5

Hi @Parsian, this recent post may be of further help to you: Google Maps - Do I have to use Ionic Native?

Also Josh Morony has posted a very good guide regarding Integrating Native Google Maps

I would also double check that you have installed the plugin that is mentioned in the console output you have shared.

6

I tried following solution but it fails for me

image
image1366×768 119 KB

map.ts

import {Component, NgZone} from "@angular/core";
import {NavController, Platform} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, GoogleMapsMarkerOptions} from 'ionic-native';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  templateUrl: 'map.html'
})
export class MapPage {
  private map: GoogleMap;

  constructor(private _navController: NavController,
    private platform: Platform,
    private _zone: NgZone) {
    this.platform.ready().then(() => this.onPlatformReady());
  }


  private onPlatformReady(): void {

  }

  ngAfterViewInit() {
    GoogleMap.isAvailable().then(() => {

      this.map = new GoogleMap('map_canvas');

      this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        alert("GoogleMap.onMapReady(): " + JSON.stringify(data));

        this._zone.run(() => {
          let myPosition = new GoogleMapsLatLng(38.9072, -77.0369);
          console.log("My position is", myPosition);
          this.map.animateCamera({ target: myPosition, zoom: 10 });
        });

      });
    });
  }

  private onMapReady(): void {
    alert('Map ready');
  }
}

map.html

<div #map id=“map”>

map.scss
page-map {
.map {
.scroll {
height: 100%;
}

  #map {
      width: 100%;
      height: 100%;
  }
}
}
7

Hi @pjhartin thank you for your guiding.

Perchance I tried Also Josh Morony’s guide but it also shows nothing on device. and I solved plugin problem by a new blank project starting.

pkage.json

"dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "@types/google-maps": "^3.2.0",
    "ionic-angular": "2.0.0-rc.4",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "promise": "^7.1.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.47",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],

config.xml

    <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="14"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="FadeSplashScreenDuration" value="300"/>
      <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar"/>
      </feature>
      <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
      <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
      <plugin name="cordova-plugin-console" spec="1.0.5"/>
      <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
      <plugin name="cordova-plugin-device" spec="1.1.4"/>
      <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
      <plugin name="cordova-plugin-googlemaps" spec="https://github.com/mapsplugin/cordova-plugin-googlemaps">
        <variable name="API_KEY_FOR_ANDROID" value="AI**********************************" />
    </plugin>
8

You mentioned the android version as 4.0.3,
According to this link ionic only supports 4.4 above.Maybe try with crosswalk
or later version of android.
Also, cordova plugins do not work with ionic serve

9

Dear @surajrao thanks for your guiding. Ive tested some simple codes on android version 4.0.3 but this one is not working. crosswallk may be become a solution but i think it is not good enough. it has over load size of package from 8.3mb to 38.6mb and overhead mobile device processors oppressively.

Is there any other solution instead of native map?

10

There are a couple of threads discussing google maps - one is mentioned above and second is Ionic 2 + Typescript + Google Maps about angular 2 google maps. I havent tried them. But I am not sure either would work correctly if ionic does not support the platform correctly.

11

Do you experienced Gmaps.js?