My first map-app errors

Parsian · January 1, 2017, 12:12pm

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();
        });
     }

}

rsa · January 1, 2017, 2:55pm

Did you tested on real device ?

Parsian · January 1, 2017, 3:29pm

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)

Parsian · January 2, 2017, 6:25am

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

pjhartin · January 2, 2017, 6:41am

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.

Parsian · January 2, 2017, 6:59am

I tried following solution but it fails for me

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%;
  }
}
}

Parsian · January 2, 2017, 7:15am

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>

surajrao · January 2, 2017, 8:32am

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

Parsian · January 2, 2017, 11:49am

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?

surajrao · January 2, 2017, 12:05pm

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.

rsa · January 2, 2017, 3:21pm

Do you experienced Gmaps.js?