# My first map-app errors

**URL:** <https://forum.ionicframework.com/t/my-first-map-app-errors/74850>\
**Category:** ionic-v3\
**Created:** [January 1, 2017, 12:12pm UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850 "2017-01-01T12:12:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Parsian](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/parsian/32/106077_2.png) [@Parsian](https://forum.ionicframework.com/u/Parsian)\
**Post date:** [January 1, 2017, 12:12pm UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/1 "2017-01-01T12:12:23Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/1/1/111251e7d90bb525d6de9c02dcecdc994ca5ead6.png) }

---

<div class="post-metadata">

**Author:** ![rsa](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@rsa](https://forum.ionicframework.com/u/rsa)\
**Post date:** [January 1, 2017, 2:55pm UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/2 "2017-01-01T14:55:12Z")

</div>

Did you tested on real device ?

---

<div class="post-metadata">

**Author:** ![Parsian](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/parsian/32/106077_2.png) [@Parsian](https://forum.ionicframework.com/u/Parsian)\
**Post date:** [January 1, 2017, 3:29pm UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/3 "2017-01-01T15:29:15Z")

</div>

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

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/8/c/8ccc07d16ce728180fe1fd65249e7760e3291730.png)

---

<div class="post-metadata">

**Author:** ![Parsian](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/parsian/32/106077_2.png) [@Parsian](https://forum.ionicframework.com/u/Parsian)\
**Post date:** [January 2, 2017, 6:25am UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/4 "2017-01-02T06:25:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pjhartin](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/pjhartin/32/105437_2.png) [@pjhartin](https://forum.ionicframework.com/u/pjhartin)\
**Post date:** [January 2, 2017, 6:41am UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/5 "2017-01-02T06:41:06Z")

</div>

Hi @Parsian, this recent post may be of further help to you: [Google Maps - Do I have to use Ionic Native?](https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native/74751)

Also Josh Morony has posted a very good guide regarding [Integrating Native Google Maps](http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/)

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

---

<div class="post-metadata">

**Author:** ![Parsian](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/parsian/32/106077_2.png) [@Parsian](https://forum.ionicframework.com/u/Parsian)\
**Post date:** [January 2, 2017, 6:59am UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/6 "2017-01-02T06:59:05Z")

</div>

I tried following solution but it fails for me

> [@Google Maps - don't work](https://forum.ionicframework.com/t/google-maps-dont-work/55637/5):
>
> this is a known issue and has been logged in the past… take a look at my project here for a work around

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/2/9/29c213fef60311a760a0bd6f1eccc4c4094b7d51.png)

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

```

---

<div class="post-metadata">

**Author:** ![Parsian](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/parsian/32/106077_2.png) [@Parsian](https://forum.ionicframework.com/u/Parsian)\
**Post date:** [January 2, 2017, 7:15am UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/7 "2017-01-02T07:15:19Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![surajrao](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/surajrao/32/120071_2.png) [@surajrao](https://forum.ionicframework.com/u/surajrao)\
**Post date:** [January 2, 2017, 8:32am UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/8 "2017-01-02T08:32:11Z")

</div>

You mentioned the android version as 4.0.3,  
According to this [link](http://ionicframework.com/docs/overview/#browser-support) ionic only supports 4.4 above.Maybe try with [crosswalk](https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview)  
or later version of android.  
Also, cordova plugins do not work with ionic serve

---

<div class="post-metadata">

**Author:** ![Parsian](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/parsian/32/106077_2.png) [@Parsian](https://forum.ionicframework.com/u/Parsian)\
**Post date:** [January 2, 2017, 11:49am UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/9 "2017-01-02T11:49:43Z")

</div>

Dear @surajrao thanks for your guiding. Ive tested some simple codes on android version 4.0.3 but this one is not working. [crosswallk](https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview) 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?

---

<div class="post-metadata">

**Author:** ![surajrao](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/surajrao/32/120071_2.png) [@surajrao](https://forum.ionicframework.com/u/surajrao)\
**Post date:** [January 2, 2017, 12:05pm UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/10 "2017-01-02T12:05:05Z")

</div>

There are a couple of threads discussing google maps - one is mentioned above and second is [Ionic 2 + Typescript + Google Maps](https://forum.ionicframework.com/t/ionic-2-typescript-google-maps/53006/15) about [angular 2 google maps](https://github.com/SebastianM/angular2-google-maps). I havent tried them. But I am not sure either would work correctly if ionic does not support the platform correctly.

---

<div class="post-metadata">

**Author:** ![rsa](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@rsa](https://forum.ionicframework.com/u/rsa)\
**Post date:** [January 2, 2017, 3:21pm UTC](https://forum.ionicframework.com/t/my-first-map-app-errors/74850/11 "2017-01-02T15:21:40Z")

</div>

Do you experienced [Gmaps.js](https://hpneo.github.io/gmaps/)?