ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native

@ionic-native/google-maps (v5.27.0)

@ionic-native/google-maps plugin is a wrapper plugin for cordova-plugin-googlemaps for Ionic framework.

Ionic Native wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.

---

Installation

First of all, you need to generate API keys for Google Maps APIs.

• How to generate API keys?

Second, run following command to install @ionic-native/core and @ionic-native/google-maps plugins in your project.

npm install @ionic-native/core@beta @ionic-native/google-maps@beta

ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps

Third, update config.xml with your API keys.

<widget ...>
  ...
  <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
  <preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />
  ...
</widget>

---

Documentation

For the full Ionic Native documentation, please checkout this page.

• @ionic-native/google-maps official documents

Also there are documents/demos for your help:

• cordova-plugin-googlemaps official documents

• @ionic-native/google-maps get started

• @ionic-native/google-maps slide

Demo

• (ionic v4)@ionic-native/google-maps quick example

• (ionic v3)@ionic-native/google-maps quick example

---

Troubles?

Before asking your trouble, please check the trouble shooting guides.

• Trouble shootings

If you can't solve your problem, please report to ionic-native-google-maps repository.

ionic-native-google-maps's Issues

Google maps shows blank on iOS?

Hello guys,

Google maps native is working fine on production build of android.
However, on iOS, it's showing only beige color blank?
It's not white blank. It shows markers correctly but the map isn't loading.

How can I fix this error?

Thanks

Error with Google Maps PluginPolyline

Hi, I getting this error from yesterday:

/platforms/android/src/plugin/google/maps/PluginPolyline.java:39: error: cannot access zzbgl

    polylineOptions.add(path.get(i));
                   ^

class file for com.google.android.gms.internal.zzbgl not found

This was working yesterday before I tried to build my Android app.

Help!!

How dows affect this announcement to the plugin?

Yesterday, Google announces this

Where is positioned the ionic wrapper of cordova google maps on this price table?

https://cloud.google.com/maps-platform/pricing/sheet/

Mobile Native Dynamic Maps?

Thanks for your time

Adding Markers doesn't work

I'm trying to test markers in my view, and they won't add. Here's my plugin breakdown:

"dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/core": "^4.7.0",
    "@ionic-native/google-maps": "^4.7.0",
    "@ionic-native/splash-screen": "4.6.0",
    "@ionic-native/status-bar": "4.6.0",
    "@ionic/storage": "2.1.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-googlemaps": "^2.2.9",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.2.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
"cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "(My Key)",
        "API_KEY_FOR_IOS": "(My Key)",
        "PLAY_SERVICES_VERSION": "12.0.0",
        "ANDROID_SUPPORT_V4_VERSION": "24.1.0"
      },
      "cordova-plugin-statusbar": {}
    },

And my view code:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { GoogleMap, GoogleMaps, GoogleMapsEvent } from "@ionic-native/google-maps";
import { IonicPage } from 'ionic-angular';
import { Store } from '../../models/store.model';
import { LocationsConstants } from './locations.constants';

@IonicPage()
@Component({
  selector: 'page-locations',
  templateUrl: 'locations.html',
})
export class LocationsPage {

  public map: GoogleMap;
  public stores: Store[];

  constructor(
    private _http: HttpClient
  ) { }

  public ionViewDidLoad() {
    this.map = GoogleMaps.create('map', LocationsConstants.MapOptions);
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => this.loadMap());
  }

  public loadMap() {
    this.placeMarkers([]);
    this._http.get<Store[]>('data/stores.json');
  }

  public placeMarkers(stores: Store[]) {
    
    this.map.addMarker({
      position: {
        "lat": 40.333564,
        "lng": 74.487639
      }, icon: 'blue', animation: 'DROP'
    });
  }

}

Loading the map works fine, it's just the marker will not add to the map...

could not build/run after google-maps plugin installed

hello ionic- team!
i have some issue. could not build/run ionic app when after installed google map plugin and if I delete the plugin then the build / run is working perfectly fine.

ionic info
cli packages: (/home/webdior/.nvm/versions/node/v9.10.1/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0 

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v9.10.1
npm  : 5.6.0 
OS   : Linux 4.13

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

getMyLocation not working

getMyLocation not working, I tried to alert the result and the error but nothing happens.

This is my ionic cordova plugin

cordova-android-play-services-gradle-release 1.3.0 "cordova-android-play-services-gradle-release"
cordova-plugin-device 2.0.1 "Device"
cordova-plugin-googlemaps 2.2.9 "cordova-plugin-googlemaps"

and here is my function

get_location(){
this.map.getMyLocation().then((pos) => {
      alert(JSON.stringify(pos));
},err => alert(JSON.stringify(err));
}

Android not launch GoogleMapsEvent.MAP_READY

I try to execute 'the basic used example' and work fine in iOS, when I try to run it on Android, it's not work. Never launch content this.map.one(GoogleMapsEvent.MAP_READY)

I register correct API Keys in Google, check version plugins, etc...

My ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

Node  : v8.9.4
npm   : 5.8.0
OS    : macOS High Sierra
Xcode : Xcode 9.3.1 Build version 9E501

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

And my plugins info:

"@ionic-native/geolocation": "^4.7.0",
"@ionic-native/google-maps": "^4.8.2",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-googlemaps": "^2.3.4",

"cordova-plugin-googlemaps": {
    "API_KEY_FOR_ANDROID": "**********",
    "API_KEY_FOR_IOS": "***********",
    "PLAY_SERVICES_VERSION": "12.0.0",
    "ANDROID_SUPPORT_V4_VERSION": "24.1.0",
    "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
    "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
  },

Thanks you so much for help!!!

Google Maps Ready Event

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.7.0 "Google Maps SDK for iOS"
cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-appavailability 0.4.2 "AppAvailability"
cordova-plugin-calendar 5.0.0 "Calendar"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-device-motion 2.0.1 "Device Motion"
cordova-plugin-dialogs 2.0.1 "Notification"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-globalization 1.11.0 "Globalization"
cordova-plugin-google-analytics 1.8.3 "Google Universal Analytics Plugin"
cordova-plugin-googlemaps 2.3.6 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.19 "cordova-plugin-ionic-webview"
cordova-plugin-shake 0.6.0 "Shake Gesture Detection"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.4.0 "SocialSharing"
cordova-sqlite-storage 2.3.1 "Cordova sqlite storage plugin"
es6-promise-plugin 4.2.2 "Promise"
mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"
uk.co.workingedge.phonegap.plugin.launchnavigator 4.2.0 "Launch Navigator"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@angular/core": "^6.0.1",
"@ionic-native/google-maps": "^4.8.2",

Current behavior:
First of all, thank you for maintaining this great plugin and the issues so closely.

I'm trying to do static maps via the toDataURL() method, and it's working, although there's a question of timing. I set a 1s timeout which you'll see in the code below, and sometimes that's enough to fully render the map, sometimes it's too much, sometimes not enough.

I'm wondering if there's a callback or event that fires that says that the map is fully rendered? I've tried the MAP_READY event, but it fires too quickly. In the code below, it fires before the marker is added.

Also I noted in another ticket that you'd said that we can ignore the MAP_READY event.

Expected behavior:
A callback or event would fire to signal that the map is fully rendered.

Screen capture or video record:

Related code, data or error log (please format your code or data):

				this.map = GoogleMaps.create(element, {
					camera: {
						target: center,
						zoom: zoom,
						tilt: 0,
					},
					gestures: {
						scroll: false,
						tilt: false,
						rotate: false,
						zoom: false,
					},
				});

				this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
					if (this.debug) console.log('map ready');
				});

				//create marker
				this.map.addMarker({
					position: center,
					icon: {
						url: 'assets/imgs/marker.png',
						size: {
							width: 20,
							height: 29
						},
						anchor: [10, 28]
					}
				}).then(marker => {
					//map is loaded, make a PNG now and swap it out
					if (this.debug) console.log('marker added');
					setTimeout(() => {
						//wait 1s because sometimes the marker can disappear
						if (this.debug) console.log('timeout finished');
						this.map.toDataURL({
							uncompress: true
						}, image => {
							if (this.debug) console.log('toDataURL finished');
							const img = document.createElement('img');
							img.src = image;
							element.appendChild(img);
							marker.remove();
							this.map.remove();

							//we're done; globally remove class "_gmaps_cdv_"
							let elements = document.getElementsByClassName('_gmaps_cdv_');
							while(elements.length > 0) {
								elements[0].classList.remove('_gmaps_cdv_');
							}

							if (this.debug) console.log('all done');
						});
					}, 1000);
				}).catch(error => {
					if (this.debug) console.warn('error ' + JSON.stringify(error));
				});

Ionic v4 and Google maps Native

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS

Is it compatible with the ionic v4?

Focus centered on my location

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

cordova information: (run $> cordova plugin list)

cordova-background-geolocation 2.12.2 "BackgroundGeolocation"
cordova-plugin-background-fetch 5.4.1 "CDVBackgroundFetch"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.3.5 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-request-location-accuracy 2.2.3 "Request Location Accuracy"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.4.0 "SocialSharing"
cordova.plugins.diagnostic 4.0.8 "Diagnostic"
es6-promise-plugin 4.2.2 "Promise"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"dependencies": {
   "@angular/animations": "5.2.10",
   "@angular/common": "5.2.10",
   "@angular/compiler": "5.2.10",
   "@angular/compiler-cli": "5.2.10",
   "@angular/core": "5.2.10",
   "@angular/forms": "5.2.10",
   "@angular/http": "5.2.10",
   "@angular/platform-browser": "5.2.10",
   "@angular/platform-browser-dynamic": "5.2.10",
   "@ionic-native/camera": "^4.7.0",
   "@ionic-native/core": "^4.7.0",
   "@ionic-native/device": "^4.7.0",
   "@ionic-native/diagnostic": "^4.7.0",
   "@ionic-native/google-maps": "^4.8.2",
   "@ionic-native/location-accuracy": "^4.7.0",
   "@ionic-native/social-sharing": "^4.7.0",
   "@ionic-native/splash-screen": "4.7.0",
   "@ionic-native/status-bar": "4.7.0",
   "@ionic/pro": "1.0.20",
   "@ionic/storage": "2.1.3",
   "@types/socket.io-client": "^1.4.32",
   "cordova-android": "7.0.0",
   "cordova-background-geolocation": "git+ssh://[email protected]/transistorsoft/cordova-background-geolocation.git#2.12.2",
   "cordova-plugin-background-fetch": "^5.4.1",
   "cordova-plugin-camera": "^4.0.3",
   "cordova-plugin-device": "^2.0.2",
   "cordova-plugin-googlemaps": "^2.3.5",
   "cordova-plugin-ionic-keyboard": "^2.1.2",
   "cordova-plugin-ionic-webview": "^1.2.1",
   "cordova-plugin-request-location-accuracy": "^2.2.3",
   "cordova-plugin-splashscreen": "^5.0.2",
   "cordova-plugin-statusbar": "^2.4.2",
   "cordova-plugin-whitelist": "^1.3.3",
   "cordova-plugin-x-socialsharing": "^5.4.0",
   "cordova.plugins.diagnostic": "^4.0.8",
   "es6-promise-plugin": "^4.2.2",
   "ionic-angular": "3.9.2",
   "ionicons": "3.0.0",
   "lodash": "^4.17.10",
   "minimist": "^1.2.0",
   "rxjs": "5.5.10",
   "socket.io-client": "^2.1.1",
   "sw-toolbox": "3.6.0",
   "xml2js": "^0.4.19",
   "zone.js": "0.8.26"
 },
 "devDependencies": {
   "@ionic/app-scripts": "3.1.9",
   "@types/googlemaps": "^3.30.9",
   "typescript": "~2.6.2"
 },

Current behavior:
Today the marker (blue automatic generated by myLocation: true) moves alone but the map does not stay fixed in it, that is to say as the marke's movement requires that it is always in the center.

Expected behavior:
Marker fixed when moving automatically or with some command to enable or disable, in fact I need to know if there is a way to do this natively or by development.

Related code, data or error log (please format your code or data):

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 0,
          lng: 0
        },
        zoom: 16,
        bearing: 0
      },
      controls: {
        compass: false,
        myLocationButton: true,
        indoorPicker: false,
        myLocation: true
      },
      gestures: {
        scroll: true,
        tilt: true,
        rotate: false,
        zoom: true
      },
    };
    let mapElement: HTMLElement = document.getElementById('map_canvas');
    this.map = GoogleMaps.create(mapElement, mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('mapa iniciado');
        this.map.getMyLocation().then((resp) => {
          this.map.animateCamera({
            target: resp.latLng
          });
        });
        this.getAllAddressClients();
      });

Cannot set property 'marker_703732314972' of undefined

Hi,
Today i reinstall module cause ios don't find it and i have this error in IOS and Android after call

let latLng:LatLng  = new LatLng(lat, lng);
   // create new marker
   let markerOptions: MarkerOptions = {
     position: latLng,
     title: titre,
   }
   this.map.addMarker(markerOptions)

my code work before reinstall in android , after reinstall i have this error:

Thanks for read / help

'Native: tried accessing the GoogleMaps plugin but it's not installed.

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS
• Browser

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.7.0 "Google Maps SDK for iOS"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.3.8 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.19 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.3.3 "Cordova sqlite storage plugin"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "^4.10.0"
"@ionic-native/google-maps": "^4.9.1"

Current behavior:
run command ionic run browser.
So I got console error 'Native: tried accessing the GoogleMaps plugin but it's not installed. and no map shown.

Info

My source code repositry is (https://github.com/MasaharuKomuro/virtical) and branch is google-map-test.
And error page is at http://localhost:8000/index.html#/main/spots/spots .

I checked @ionic-native/core/plugin.js Line:10 Fn:checkAvailability.
In this function, Fn getPlugin is used. In Fn getPlugin, it would get plugin from Window object, but Window object dose not have plugin plugin.google.maps. (navigator.geolocation is exsists)

The KML file/layer never load and no gets errors

I am trying to add a city kml layer exported via google maps web.

This is the first file

https://we.tl/uarWXlY3i7

And this is the code used to load the kml file (that is called after, maps is ready):

addKMLOverlay() {
    console.log("add kml serv")
    return this.map.addKmlOverlay({
      /*'url': 'http://myrally.io/kml/test.kml',   // <-- This file works perfectly*/
      'url': 'assets/kml/gcval.kml',   // <-- .KMZ file is not supported yet!
      'clickable': true,
      'suppressInfoWindows': false
    }).then(kmlOverlay => {
      console.log(JSON.stringify(kmlOverlay));
    }).catch(error => {
      console.error(JSON.stringify(error))
    })
  }

When I try to load the first file it not loads never and not returns any error.

What would be the problem with the first file?

This is the ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 6.4.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2 
    ios-sim           : 6.1.2 
    Node              : v9.9.0
    npm               : 5.7.1 
    OS                : macOS High Sierra
    Xcode             : Xcode 9.3 Build version 9E145 

Ionic native core v.4.7
Ionic native google maps v.4.7
cordova-plugin-googlemaps 2.2.9

Could not get unknown property 'ANDROID_SUPPORT_V4_VERSION' and 'PLAY_SERVICES_VERSION'

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS

cordova information: (run $> cordova plugin list)

cordova-android-play-services-gradle-release 1.3.1 "cordova-android-play-services-gradle-release"
cordova-android-support-gradle-release 1.3.0 "cordova-android-support-gradle-release"
cordova-fabric-plugin 1.1.14-dev "cordova-fabric-plugin"
cordova-plugin-advanced-http 1.11.1 "Advanced HTTP plugin"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-googlemaps 2.2.9 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"

**If you use `@ionic-native/google-maps`, please tell the package.json (only `@ionic-native/core` and `@ionic-native/google-maps` are fine mostly)**


@ionic-native/core: "4.7.0",
@ionic-native/google-maps: "^4.7.0"



Ionic info command result:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 7.0.1 

local packages:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 6.4.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2 
ios-sim           : 6.1.2 
Node              : v9.9.0
npm               : 5.7.1 
OS                : macOS High Sierra
Xcode             : Xcode 9.3 Build version 9E145 

Environment Variables:

ANDROID_HOME : /Users/juanramos/Library/Android/sdk

**Current behavior:**
When I build with ionic cordova build android [--prod] It reports this error:

`Could not get unknown property 'PLAY_SERVICES_VERSION' for object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.`

If I install the plugin cordova-android-play-services-gradle-release with the variable --variable PLAY_SERVICES_VERSION=11.8.0

It reports only the ANDROID_SUPPORT_V4_VERSION error. I have already tried to install the plugin [cordova-android-support-gradle-release](https://www.npmjs.com/package/cordova-android-support-gradle-release) but this plugin not works


**Expected behavior:**
App compiles without problems



Could someone help me?

Google map does not load on Huawei P9 Lite

Problem
Map is blank when deployed on Huawei P9 Lite.

Versions plugin

@ionic-native/core: 5.2.10
@ionic-native/google-maps: 4.8.2
cordova-plugin-googlemaps: 2.3.1

Versions phone
Android: 7.0
Play services: 12.6.73

Repo
https://github.com/olliadri/test-maps

Observations
Working on Moto G5s.
Would downgrading be a solution here?

ionic-native google maps

Even i run this command
npm install @ionic-native/google-maps
and on command prom it shows @ionic-native/[email protected] updated
Still when in app.module.ts.. I code import { GoogleMaps } "@ionic-native/google-maps" its says component not found. Any suggestion where would i be wrong or any other solution

Feature Request : Fallback to Javascript map for browser testing

This is not a bug or issue but a feature request...
I would love to be able to use your google maps plugin while testing in ionic lab. Would it be possible for you to add in a fallback where the javascript google maps implementation is served when the app is being run on the browser or on the dev app? I realise that there are some native features that are not available in the javascript api but some kind graceful degradation would be extremely useful for quicker testing. Thank you for the great work.

getMyLocation is never rejected

When a user declines location permission, the getMyLocation promise is not rejected.
The LocationService has support for this, but the reject function is not passed.

static getMyLocation(options?: MyLocationOptions): Promise {
return new Promise((resolve, reject) => {
GoogleMaps.getPlugin().LocationService.getMyLocation(options, resolve);
});
}

I created a pull request with a fix #15

Can MarkerIcon support using the SVG Path notation

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [x ] Android
• [x ] iOS

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"
cordova-background-geolocation-lt 2.11.0 "BackgroundGeolocation"
cordova-fabric-plugin 1.1.14-dev "cordova-fabric-plugin"
cordova-open-native-settings 1.5.1 "Native settings"
cordova-plugin-advanced-http 1.11.1 "Advanced HTTP plugin"
cordova-plugin-app-preferences 0.99.3 "AppPreferences"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-background-fetch 5.3.0 "CDVBackgroundFetch"
cordova-plugin-badge 0.8.7 "Badge"
cordova-plugin-calendar 5.1.0 "Calendar"
cordova-plugin-cocoalumberjack 0.0.4 "CocoaLumberjack"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-device-name 1.3.2 "Device-Name"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-google-analytics 1.8.3 "Google Universal Analytics Plugin"
cordova-plugin-googlemaps 2.2.8 "cordova-plugin-googlemaps"
cordova-plugin-googleplus 5.3.0 "Google SignIn"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic 4.1.6 "IonicCordova"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.19 "cordova-plugin-ionic-webview"
cordova-plugin-nativestorage 2.3.1 "NativeStorage"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-screen-orientation 3.0.1 "Screen Orientation"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-youtube-video-player 1.0.6 "CordovaYoutubeVideoPlayer"
es6-promise-plugin 4.2.2 "Promise"
phonegap-plugin-push 2.1.3 "PushPlugin"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "4.7.0",
"@ionic-native/google-maps": "4.7.0",

Current behavior:

   let stopIcon = { path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
          fillOpacity: 1,
          fillColor: "#FFFFFF",
          strokeOpacity: 1.0,
          strokeColor: routeColor,
          strokeWeight: 3,
          scale: 8 };
  
   let markerOptions: MarkerOptions = {
      icon: stopIcon,
      title: stop.name,
      position: new LatLng(stop.latitude, stop.longitude)
    };

    this.map.addMarker(markerOptions)
      .then((marker: Marker) => {
        marker.on(GoogleMapsEvent.INFO_CLICK)
          .subscribe(() => {
            this.showStopDetail(stop);
          });
      });

The stopIcon is ignored and still displays the default marker icon. I went back to check the API document at https://github.com/ionic-team/ionic-native-google-maps/tree/master/documents/markericon
it seems not supporting SVG icon. Can you support SVG icon ?

Thanks.

Expected behavior:

Screen capture or video record:

Related code, data or error log (please format your code or data):

The person who share your project files on Github (or other git repository) is in faster lane than other people.
Please share your project files on Github or others(Bitbucket, Gitlabs...etc).
If you don't want to share your project files, please create a demo project, then share it.

Screen captures, and/or native logs(such as Logcat, xcode logs) are appreciate.

Giving much information, you are waiting time is less.
Thank you for your cooperation.

loadGeoJSON() is available?

this is not issue
but i want to use loadGeoJSON() for set multiple polygon data and also use routing dynamically like

Example routing implementation like : (customise user can drag start location to end location)

https://www.google.com/maps/dir/35.9038224,-78.8660866/35.9047374,-78.8662925/@35.9049155,-78.8664134,16z

loadGeoJson file using leaflet :

Updating to 4.6.1

Hi @wf9a5m75 I just tried updating the plugin and it appears to install 4.6 and not 4.6.1. Not sure if it's the way I'm updating or not.
The steps I took to update:
cordova plugin rm cordova-plugin-googlemaps
cordova plugin rm com.googlemaps.ios
npm install @ionic-native/core @ionic-native/google-maps
cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_IOS="xxx"

After install:

• @ionic-native/[email protected]
• @ionic-native/[email protected]

Thank you.

Please fix the version conflict either by updating the version of the google-services plugin

I am using "phonegap-plugin-push". After installing "cordova-plugin-googlemaps" I am receiving below error

Please fix the version conflict either by updating the version of the google-services plugin

This is my "platforms\android\project.properties" file containing below code

target=android-26 android.library.reference.1=CordovaLib android.library.reference.2=app cordova.system.library.1=com.android.support:support-v4:26.+ cordova.system.library.2=com.android.support:appcompat-v7:26.+ cordova.system.library.3=com.android.support:support-v13:26.+ cordova.system.library.4=me.leolin:ShortcutBadger:1.1.17@aar cordova.system.library.5=com.google.firebase:firebase-messaging:11.6.0 cordova.gradle.include.1=phonegap-plugin-push/alvi-push.gradle cordova.gradle.include.2=cordova-plugin-googlemaps/alvi-tbxml-android.gradle cordova.system.library.6=com.google.android.gms:play-services-maps:15.0.1 cordova.system.library.7=com.google.android.gms:play-services-location:15.0.1 cordova.system.library.8=com.android.support:support-core-utils:26.1.0

Now if I change "com.google.firebase:firebase-messaging:11.6.0" this version to 15.0.1 or else then it creates more issue. Please let me know what should I do to get rid this error. It already wasted my 2 days.

Compatibility error between GoogleMaps and GoogleAnalytics plugins

Hi all,

It looks like cordova-plugin-google-analytics and cordova-plugin-googlemaps aren't compatible with android platform.

Steps to reproduce:

ionic start nameApp blank
cd nameApp
ionic cordova platform add android
ionic cordova plugin add cordova-plugin-google-analytics
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="your_android_key" --variable API_KEY_FOR_IOS="your_ios_key"
ionic cordova build android

Stacktrace:

BUILD FAILED in 11s
27 actionable tasks: 6 executed, 21 up-to-date
(node:26949) UnhandledPromiseRejectionWarning: Error: /Users/your_path/nameApp/platforms/android/gradlew: Command failed with exit code 1 Error output:
/Users/your_path/nameApp/platforms/android/app/src/main/java/plugin/google/maps/PluginLocationService.java:497: error: cannot access zzbgl
    LocationRequest locationRequest= LocationRequest.create()
                                                    ^
  class file for com.google.android.gms.internal.zzbgl not found
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
1 error

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 11s
    at ChildProcess.whenDone (/Users/your_path/nameApp/platforms/android/cordova/node_modules/cordova-common/src/superspawn.js:169:23)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Socket.stream.socket.on (internal/child_process.js:346:11)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at Pipe._handle.close [as _onclose] (net.js:567:12)
(node:26949) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:26949) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

myLocationButton

Hi

Can you confirm that it is possible to set myLocationButton and myLocation separately?

See Issue and Release notes

I have tried to implement this but setting myLocationButton to false in map controls does not remove it.

Thanks

Doesn't work for me

I followed the instructions on https://www.npmjs.com/package/@ionic-native/google-maps
but when I load my app I only see a grey box on it.
Steps
1-Installed npm install @ionic-native/core @ionic-native/google-maps
and then
2-I generated the key following the instructions on
https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/api_key/generate_api_key.md
3-then I executed
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my_key" --variable API_KEY_FOR_IOS="my_key"
4-After all of this
ionic cordova run android
But when the app load I only see a grey box.
Any help?
Thank you.

Bug with SideMenu

I have a problem with this plugin, normally it happens when I return to the view or I go back from the menu, the responsive map stop working as it should be. This problem also happens in your example, so I think that it isn't something that I did, you can check installing the demo in a clean project:
https://github.com/mapsplugin/ionic-googlemaps-quickdemo

MarkerCluster does not work with error "evaluating 'Object.keys(self._markerMap)'"

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.7.0 "Google Maps SDK for iOS"
cordova-plugin-device 1.1.7 "Device"
cordova-plugin-googlemaps 2.3.6 "cordova-plugin-googlemaps"
cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Current behavior:

I've installed the demo of ionic googlemaps (https://github.com/mapsplugin/ionic-googlemaps-quickdemo). I ran ionic cordova run ios -c. All pages work well, but not the MarkerCluster page: the map does not show up anymore, and I cannot see any pin or cluster. Here is the console print the error log above. I really need to be able to show the map, the pins and the clusters for my application which is based on geolocation: could you please help me?

Related code, data or error log (please format your code or data):

Unhandled Promise rejection: undefined is not an object (evaluating 'Object.keys(self._markerMap)') ; Zone: <root> ; Task: Promise.then ; Value: [object Object] keys@[native code]
remove@http://10.0.106.10:8100/plugins/cordova-plugin-googlemaps/www/MarkerCluster.js:307:21
clearObj@http://10.0.106.10:8100/plugins/cordova-plugin-googlemaps/www/Map.js:688:26
remove@http://10.0.106.10:8100/plugins/cordova-plugin-googlemaps/www/Map.js:697:11
http://10.0.106.10:8100/plugins/cordova-plugin-googlemaps/www/CordovaGoogleMaps.js:414:34 forEach@[native code] 
removeDomTree@http://10.0.106.10:8100/plugins/cordova-plugin-googlemaps/www/CordovaGoogleMaps.js:401:19 
http://10.0.106.10:8100/plugins/cordova-plugin-googlemaps/www/CordovaGoogleMaps.js:78:38 
run@http://10.0.106.10:8100/build/polyfills.js:3:9529 
http://10.0.106.10:8100/build/polyfills.js:3:19625 
runTask@http://10.0.106.10:8100/build/polyfills.js:3:10224 o@http://10.0.106.10:8100/build/polyfills.js:3:7281 promiseReactionJob@[native code]

Plugin crashing when Ionic app is initialized in the background

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS

cordova information: (run $> cordova plugin list)

Current behavior:

This is just a solution description to help anyone else who might be encountering this problem (Not sure it's a bug) - when developing an Ionic/Cordova app that has any kind of background activity which might cause the app to "wake up" in the background (iBeacon, for example) after it has been terminated by the user or iOS, and attempt to initialize the map inside ionViewDidLoad(), the plugin will crash with the following error after about 30 seconds (retrieved from Ionic Pro console, only generic error in the logs):

TypeError: undefined is not an object (evaluating 'map.getDiv')
at _remove (CordovaGoogleMaps.js:714:16)
at ? ([native%20code]::)
at callback (BaseClass.js:113:21)
at trigger (BaseClass.js:68:25)
at remove (Map.js:655:15)
at ? (vendor.js:1:679554)
at onInvokeTask (vendor.js:1:76614)
at runTask (polyfills.js:3:10844)
at invokeTask (polyfills.js:3:16801)
at n (polyfills.js:3:66)

This happens because there is no DIV element to attach to, even though the app itself is running, and the map appears to have been initialized successfully and without an error.

The solution is to only initialize the app when ionViewDidEnter() is called, and not on ionViewDidLoad() like in the example on the main page. For example, use an Observable to initialize the map view when the page is first opened:

private created$: Subject<boolean> = new Subject();

ionViewDidEnter() {
    this.created$.next(true);
    this.created$.complete();
}

ionViewDidLoad() {
    this.created$.subscribe(() => {
      this.initializeMapView();
    });
}

Related code, data or error log (please format your code or data):

ionic-googlemaps-quickdemo does not work with default settings

I cloned ionic-googlemaps-quickdemo.

Replaced (REPLACE WITH YOUR APK KEY) in config.xml and package.json files with my Google Maps API keys.

Then I did the following commands:

1. npm i
2. ionic serve

I got a console error Native: tried accessing the GoogleMaps plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Which is unexpected as this is a native ionic item.

I tried again using this command:

1. ionic cordova run browser -lcs

But with that the loaded browser gave the following error. Native: tried accessing the GoogleMaps plugin but it's not installed.

How can I get native google maps loading?

Map freezes on iOS after touch event

On Android everything works fine but on iOS the screen freezes after the first touch event within the map div.

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.4.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2
Node              : v8.9.4
npm               : 5.6.0
OS                : macOS High Sierra
Xcode             : Xcode 9.3 Build version 9E145

Environment Variables:

ANDROID_HOME : /Users/jlaxa/Library/android/sdk

Misc:

backend : pro

The XCode Debugger shows some timeouts after the touch event, while other interactions with the view are not possible.

[Ionic3|Android] GoogleMapsEvent.MAP_READY not fired

Hello ! I use cordova-plugin-googlemaps version 2.3.1 with play services version 15.0.1.
My Ionic info :

cli packages: 
    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:
    cordova (Cordova CLI) : 8.0.0

local packages:
    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 7.0.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:
    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2
    Node              : v9.5.0
    npm               : 5.6.0
    OS                : macOS High Sierra
    Xcode             : Xcode 9.3.1 Build version 9E501

My code :

    @ViewChild('map') mapElement: ElementRef;
     
     public map: GoogleMap;
     constructor(...) { ... }

    ionViewDidLoad() {
        this._initMap();
    }

    ionViewWillLeave() {
        //Clear out the view to make sure to save memory
        this.map.remove();
        this.map = null;
    }

    private _initMap() {
        this._loaderService.show();
        this.userAddress = this.locationTracker.positionInformation.address;
        console.log('in1', this.userAddress);
        this._userMarketArea = this.locationTracker.userMarketArea;
        console.log('in2', this._userMarketArea);
        if (isUndefined(this.map)) {
            let element = this.mapElement.nativeElement;
            this.map = GoogleMaps.create(element, {
                controls: {
                    myLocationButton: false,
                    mapToolbar: false
                }
            });
            console.log('in3', this.map);
            console.log('in3', GoogleMapsEvent.MAP_READY);
            Environment.setBackgroundColor('#efebeb');
            this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
                const shopsParams = {
                    longitude: this.locationTracker.positionInformation.position.lng,
                    latitude: this.locationTracker.positionInformation.position.lat,
                    radius: this.radius * 1000,
                    count: 40
                };
                const offersParams = {
                    longitude: this.locationTracker.positionInformation.position.lng,
                    latitude: this.locationTracker.positionInformation.position.lat
                };
                console.log('in4');
                this._getCards(shopsParams, offersParams)
                    .subscribe((cards: any[]) => {
                        this._cards = cards;
                        console.log('in5', this._cards);
                        this._initMarkers()
                            .subscribe(res => {
                                this.addUser();
                                this.addCluster();
                                this._loaderService.hide();
                            });
                    });
            }).catch(e => {
                this._loaderService.hide();
                console.log('ERROR one', e);
            });
        } else {
            this._loaderService.hide();
        }
    }

When I build my app in Android device the last console.log fired is console.log('in3', GoogleMapsEvent.MAP_READY);. As soon as I do this.map.one(GoogleMapsEvent.MAP_READY) nothing happens. Is it is obliged to do that (this.map.one(GoogleMapsEvent.MAP_READY)) ?

Thanks

Help: I would like to know if I can use directions with this plugins

Like this one: https://developers.google.com/maps/documentation/javascript/examples/directions-simple

Thank you!

Multiple maps between different pages

I'm submitting a ... (check one with "x")

• question
• any problem or bug report

What would be the correct way to integrate this plugin if have a main map screen, then when I click over a marker the app pushes to the page detail? This detail has data and a mini map.(other ubication)

-I have to create two different maps(different divs)?

Is possible to reuse the same map over two different pages(different ubications)

Thanks

iOs Plugin not installed

Im using Maps to add some Markers, at Android it's perfectly working, but now in iOs Im getting a problem, after call the GoogleMaps.create() I receive a Warning: Native: tried accessing the GoogleMaps plugin but it's not installed..

Ionic Info:
`cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.1.5
Cordova Platforms  : android 6.3.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2
Node              : v8.11.1
npm               : 2.15.12
OS                : macOS High Sierra
Xcode             : Xcode 9.3 Build version 9E145

Environment Variables:

ANDROID_HOME : /Users/irroba/Library/Android/sdk/

Misc:

backend : pro`

My map.ts file:

...
ionViewDidLoad() {
	this.platform.ready().then(() => {
		this.loading = this.loadingCtrl.create({
			content: 'Aguarde...',
			dismissOnPageChange: true
		});
		this.loadMap();
		
	});
}

loadMap() {
		let z = 0;
		if(this.functions.latitude && this.functions.latitude){
			z = 13;
		}
		let mapOptions: GoogleMapOptions = {
			camera: {
				target: {
					lat: this.functions.latitude,
					lng: this.functions.longitude
				},
				zoom: z
			}
		};

		let element = this.mapElement.nativeElement;
		this.map = GoogleMaps.create(element, mapOptions);
...

I already checked my Google API_KEY_FOR_IOS and its the same for API_KEY_FOR_ANDROID, btw I already checked in Google Console and both Maps SDK for Android and Maps SDK for iOs are enabled.

Can't drag the map when a div overflow above

I'm submitting a ... (check one with "x")

• question
• [ x ] any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [ x ] Android
• iOS

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.2.9 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.2.0 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "^4.6.0",
"@ionic-native/google-maps": "^4.7.0"

Current behavior:

can not drag the map when scroll a long div overflow above the map(the overflow part not cover the map view). I think the touch events stick with DOM

Expected behavior:

• This case works normally
  

• I can't drag a part of the map in this case
  

Install in react-native or nativescript

I'm submitting a ... (check one with "x")

• [x ] question
• any problem or bug report
• feature request
  Hi.
  Can this plugin be installed on react-native or nativescript?

The application closes with remote icons in the second load in iOS

I'm submitting a ... (check one with "x")

• question
• [ x ] any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• [ x ] iOS

cordova information: (run $> cordova plugin list)

call-number 0.0.2 "Cordova Call Number Plugin"
com.googlemaps.ios 2.7.0 "Google Maps SDK for iOS"
cordova-plugin-admobpro 2.31.6 "AdMob Plugin Pro"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-device 1.1.7 "Device"
cordova-plugin-extension 1.5.4 "Cordova Plugin Extension"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-opener2 2.0.19 "File Opener2"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.3.6 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.3.2 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"
onesignal-cordova-plugin 2.4.1 "OneSignal Push Notifications"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)
"@ionic-native/google-maps": "^4.8.2",
"@ionic-native/core": "^4.7.0",

Current behavior:

We add markers parametrized with remote data. One of these data is the icon image url. Then, when the map page load the first time on iOS, all is fine, but the second time the app crashes and closes automatically. If we don't give any image, or pass an static local image to all icons, the problem disappears and all if fine.
On Android, all works fine. It only occurs in iOS.
If there is any remote data and app does not have to make any icons, the app does not crash.
Expected behavior:

All times we want to load the map with all remote data, we could do without crashes.

Screen capture or video record:

Related code, data or error log (please format your code or data):

  generate_icon(data){
    let promise = new Promise((resolve => {
      let icono:MarkerIcon;
        icon = {
          // With that line the app crash on second load
          url : data.markerPath,
          // With that line the app does not crash any time
          //url : "./assets/img/dashboard/markerfull.jpeg",
          size: {
            width: 60,
            height: 70
          }
        };
        resolve(icon);
    }));
    return promise;
  }

...
    this.map.addMarker({
         position: pos,
         icon: icono
     })
...

ionic native satellite and normal view toggle option

I want this type of toggling between satellite and normal google maps view.
How can I achieve this using ionic native goole maps.
Here is my package.json
"dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular-redux/form": "^6.7.0",
"@angular-redux/store": "6.6.0",
"@angular/animations": "5.2.9",
"@angular/common": "5.2.9",
"@angular/compiler": "5.2.9",
"@angular/compiler-cli": "5.2.9",
"@angular/core": "5.2.9",
"@angular/forms": "5.2.9",
"@angular/http": "5.2.9",
"@angular/platform-browser": "5.2.9",
"@angular/platform-browser-dynamic": "5.2.9",
"@ionic-native/core": "4.6.0",
"@ionic-native/google-maps": "^4.7.0",
"@ionic-native/splash-screen": "4.6.0",
"@ionic-native/status-bar": "4.6.0",
"@ionic/pro": "1.0.20",
"@ionic/storage": "2.1.3",
"@ngx-translate/core": "^9.0.2",
"@ngx-translate/http-loader": "^2.0.1",
"@types/redux-persist": "^4.3.1",
"cordova-android": "^6.2.2",
"cordova-ios": "4.5.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#1.3.9",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"ramda": "^0.25.0",
"redux": "3.5.0",
"redux-logger": "3.0.6",
"redux-observable": "0.18.0",
"redux-persist": "^5.9.1",
"rxjs": "5.5.8",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.20"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.8",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android",
"ios"
]
}
}

my config.xml






Thanks in advance.

draggable:true is not working in Marker

The draggable :true is not working please help .
Thanks in advance
I'm submitting a ... (check one with "x")

• question
  -[x] any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS

cordova information: (run `$> cordova plugin
local packages:

@ionic/app-scripts : 3.1.10
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)
{
"name": "googlemaps",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "^4.9.0",
"@ionic-native/google-maps": "^4.8.2",
"@ionic-native/splash-screen": "4.8.0",
"@ionic-native/status-bar": "4.8.0",
"@ionic/storage": "2.1.3",
"cordova-android": "6.3.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-googlemaps": "^2.3.6",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^1.1.19",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"minimist": "^1.2.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"xml2js": "^0.4.19",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.10",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "hidden"
},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
}
}
Current behavior:

Expected behavior:

Screen capture or video record:

Related code, data or error log (please format your code or data):

The person who share your project files on Github (or other git repository) is in faster lane than other people.
Please share your project files on Github or others(Bitbucket, Gitlabs...etc).
If you don't want to share your project files, please create a demo project, then share it.

Screen captures, and/or native logs(such as Logcat, xcode logs) are appreciate.

Giving much information, you are waiting time is less.
Thank you for your cooperation.

Ionic Android StreetViewPanorama Build Fails

Using Ionic and compiling for android with the configurations and details I'll write below, builds fails due to StreetViewPanorama Class with an "Execution failed for task ':compileDebugJavaWithJavac'. " error.

Details and the trace error are about StreetViewPanoramaClass inside the clases:

• PluginStreetViewPanorama.java
• CordovaGoogleMaps.java
• MyPlugin.java

Ionic cordova plugin ls outputs:

cordova plugin ls
com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"
cordova-plugin-admobpro 2.31.5 "AdMob Plugin Pro"
cordova-plugin-camera 4.0.2 "Camera"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-extension 1.5.4 "Cordova Plugin Extension"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-opener2 2.0.19 "File Opener2"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.3.3 "cordova-plugin-googlemaps"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.2.1 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"
mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"
onesignal-cordova-plugin 2.4.0 "OneSignal Push Notifications"

Ionic cordova platform ls outputs:

cordova platform ls
Installed platforms:
android 6.4.0
Available platforms:
browser ~5.0.1
ios ~4.5.4
osx ~4.0.1
windows ~5.0.0
www ^3.12.0

I have installed the plugin with the command:

ionic cordova plugin add cordova-plugin-googlemaps@latest
--variable API_KEY_FOR_ANDROID="myapikey"
--variable API_KEY_FOR_IOS="myapikey"
--variable PLAY_SERVICES_VERSION="11.8.0"
--variable ANDROID_SUPPORT_V4_VERSION="24.1.0"
--variable LOCATION_WHEN_IN_USE_DESCRIPTION="mymessage"
--variable LOCATION_ALWAYS_USAGE_DESCRIPTION="mymessage"

and next:

npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest

If i downgrade the plugin to 2.9, I obtain a blank page in place of a map.

I have tried to follow the trace of the error and modify the code in order to obtain a succesfull build. Finally, it builds successfully modifying the classes I mentioned before in the next way:

• PluginStreetViewPanorama.java: I have delete all code. I have emptied the class.
• CordovaGoogleMaps.java: In the line 468 starts the function getgetPanorama(...){...}, I have deleted all lines related with PluginStreetViewPanorama. The final result is:

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
  public void getPanorama(final JSONArray args, final CallbackContext callbackContext) throws JSONException {
    //------------------------------------------
    // Create an instance of PluginStreetView class.
    //------------------------------------------
    JSONObject meta = args.getJSONObject(0);
    String mapId = meta.getString("id");
    Log.d(TAG, "---> mapId = " + mapId);

  }

• MyPlugin.java: Over the line 82 there is a condition that if true, references StreetViewPanorama. I have deleted that reference. The result is:

...
              } else if (TAG.startsWith("streetview")) {

              }
...

After these steps, build android command has finally succeed. And after run on device, all works fine.

But I don't want to do these changes each time I have to build an app or a new version, or re-add this plugin. What is really happening? How can I fix it?

Error while trying to load map in iOS simulator

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• [x ] iOS

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.3.6 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.19 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "^4.7.0",
"@ionic-native/google-maps": "^4.8.2",

Current behavior:
After installing the plugin, I have written the code to display maps in HomePage. And then I ran the command ionic cordova build ios. After that I tried running it on iOS Simulator. Everytime I get the error

WARN: 'Native: tried accessing the GoogleMaps plugin but it's not installed.

Expected behavior:
It should run seamlessly and Google Maps should be displayed.

Screen capture or video record:

iOS sample video -
googledemo.zip

Related code, data or error log (please format your code or data):
Sample github Code

addMarkerSync - TypeError: Cannot set property 'marker_*' of undefined

FİXED
#25

addMarkerSync problem.

      this.mapService.GetAllPins().then(res => {
        var data = JSON.parse(res.data);
        data.forEach(x => {       
       
          let marker: Marker = this.map.addMarkerSync({
            title: x.title,
            icon: "./assets/icon/pin/dokum-sahisi-yonetimi.png",
            animation: 'DROP',
            position: { lat: x.lat, lng: x.lng }
          });
          marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
            alert('clicked');
          });
        });
      }).catch(error => {
        console.log("error GetAllPins", error);
      });

[GoogleMaps] Minimum container dimention is 100x100 in pixels

hello everybody,
thanks for your effort in this awesome plugin.
When trying to load the map. I got this error [GoogleMaps] Minimum container dimension is 100x100 in pixels.

ionViewWillEnter()
  {
    this.loadMap();
  }
loadMap() {
  
    // Create a map after the view is loaded.
    // (platform is already ready in app.component.ts)
    this.map = GoogleMaps.create('map_canvas', {

      camera: {
        target: {
          lat: 24.713552,
          lng: 46.675296
        },
        zoom: 18,
        tilt: 30
      }
    });

    // Wait the maps plugin is ready until the MAP_READY event
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      this.mapReady = true; 
      var w = this.map.getDiv().offsetWidth;
      var h = this.map.getDiv().offsetHeight;
      console.log("height" + h + "width"+w);

      this.get_your_location();

    });
    this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe((params: any[])  =>
      {
         this.map.clear();         
            let latLng: ILatLng = params[0];
            this.map.addMarkerSync({
              "position": latLng
            });      
            this.Get_address_by_Lat_lng(latLng["lat"], latLng["lng"]);      
      }
    );
  }

My Package.json

{
  "name": "Green",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "^4.8.0",
    "@ionic-native/geolocation": "^4.9.0",
    "@ionic-native/google-maps": "^4.8.2",
    "@ionic-native/onesignal": "^4.8.0",
    "@ionic-native/social-sharing": "^4.8.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic-native/unique-device-id": "^4.9.0",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "cordova-android": "7.0.0",
    "cordova-android-play-services-gradle-release": "^1.4.3",
    "cordova-android-support-gradle-release": "^1.4.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "^2.3.6",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-uniquedeviceid": "^1.3.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.0",
    "es6-promise-plugin": "^4.2.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "minimist": "^1.2.0",
    "onesignal-cordova-plugin": "^2.4.1",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.10",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "onesignal-cordova-plugin": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "AIzaSyBtFtgozwjRT_KY5AmzhvDmWfxer5T_UbU",
        "API_KEY_FOR_IOS": "AIzaSyBtFtgozwjRT_KY5AmzhvDmWfxer5T_UbU",
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
        "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-android-play-services-gradle-release": {
        "PLAY_SERVICES_VERSION": "15.+"
      },
      "cordova-android-support-gradle-release": {
        "ANDROID_SUPPORT_VERSION": "27.+"
      },
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "Allow Green to get your location"
      },
      "cordova-plugin-uniquedeviceid": {}
    },
    "platforms": [
      "android"
    ]
  }
}

how to integrate .geojson data? ionic 3

i want to integrate .geojson data using native-google-map so can anyone help me how to implement.

sample .geojson

{
"type": "FeatureCollection",
"name": "parking Buildings",
"crs": { "type": "name", "properties": { "name": "xx:xx:xxsad:sdf" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 1, "Shape_Leng": 317.31089312699999, "Shape_Area": 5894.1832126999998, "NAME": "M.H.F." }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -78.865800003174172, 35.899615854593087, 0.0 ], [ -78.866086471573169, 35.899474134162041, 0.0 ], [ -78.866190603841019, 35.89961347047425, 0.0 ], [ -78.865904135130521, 35.899755191142589, 0.0 ], [ -78.865800003174172, 35.899615854593087, 0.0 ] ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 2, "Shape_Leng": 167.939976535, "Shape_Area": 1653.9542080199999, "NAME": "Building A" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -78.865072880232361, 35.899731821265576, 0.0 ], [ -78.865189177357621, 35.899623279920647, 0.0 ], [ -78.865269486202621, 35.899680246437079, 0.0 ], [ -78.865153191496461, 35.899788785779251, 0.0 ], [ -78.865072880232361, 35.899731821265576, 0.0 ] ] ] } }
]
}

new BaseArrayClass() return null

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-firebase 1.0.5 "Google Firebase Plugin"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.3.7 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.19 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

@ionic-native/core: "4.9.2"
@ionic-native/google-maps: "4.8.2"

Current behavior:

I'm trying to create multiple points by doing:

let points = [
   {
      lat: -23 -23.5352,
      lng: -46.6353
   }
];
let GMPoints: BaseArrayClass<ILatLng> = new BaseArrayClass(points);

But Ionic give me the error:

Cannot read property 'BaseArrayClass' of null.

Looking for the error, I discovered that at some point the plugin tries to GoogleMap.getPlugin(), witch is returning null.

Diggin deeper, I found (inside @ionic-native/core/util.js)

export var get = function (element, path) {
    var paths = path.split('.');
    var obj = element;
    for (var i = 0; i < paths.length; i++) {
        if (!obj) {
            return null;
        }
        obj = obj[paths[i]];
    }
    return obj;
};

The path is "plugin.google.maps"
The element is Window

But at first step (i == 0), Window["plugin"] is undefined.

Expected behavior:

To create the points to use as markers in GoogleMap instance.

Related code, data or error log (please format your code or data):

TypeError: Cannot read property 'BaseArrayClass' of null
    at new BaseArrayClass (http://localhost:8100/build/vendor.js:134716:58)
    at HomePage.webpackJsonp.268.HomePage.populateMap (http://localhost:8100/build/main.js:119:24)
    at SafeSubscriber._next (http://localhost:8100/build/main.js:107:19)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/vendor.js:20762:16)
    at SafeSubscriber.next (http://localhost:8100/build/vendor.js:20700:22)
    at Subscriber._next (http://localhost:8100/build/vendor.js:20644:26)
    at Subscriber.next (http://localhost:8100/build/vendor.js:20621:18)
    at MapSubscriber._next (http://localhost:8100/build/vendor.js:25267:26)
    at MapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20621:18)
    at http://localhost:8100/build/vendor.js:138277:112

(google map) Could not start ionic app

hello ionic- team!
i have some issue. could not start ionic app when after installed google map plugin. but if uninstalled google map plugin then can start app. reason is why? i don't know.. please help me sir.

ionic info

@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:

cordova (Cordova CLI) : 8.0.0
local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms : android 6.4.0
Ionic Framework : ionic-angular 3.9.2
System:

Node : v6.9.5
npm : 3.10.10
OS : Windows 7
installed plugin version

cordova-plugin-googlemaps 2.2.9 "cordova-plugin-googlemaps"
Is there a google map plugin version for Android platform version 6.4.0? Please let me know.

Whats wrong, maps not show and app stoped

Hello, i am writing app with latest ionic version and google maps latest version to. Testing apk with Samsung Galaxy V+ (Android 4.4.4). I am try add google maps native, but won't show and app stoped.

This my code.

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent } from '@ionic-native/google-maps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  map: GoogleMap;
 
  constructor(public navCtrl: NavController) {
    
  }
 
  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {

    // Create a map after the view is ready and the native platform is ready.
    this.map = GoogleMaps.create('map_canvas');

    // Wait the maps plugin is ready until the MAP_READY event
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {


      console.log('map is ready to use.');


    });

  }

}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div id="map_canvas" style="height: 100%"></div>
</ion-content>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { GoogleMaps } from '@ionic-native/google-maps';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    GoogleMaps,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Anyone can give me explanation? Thanks.

Can't use marker.remove() or map.clear() functions

I'm pushing markers to this array 'temp1' shown in the console, but I cant use .remove() function. I tested .getPosition() and .getId() functions and they worked.

Same problem with map.clear();

TypeError: Right-hand side of 'instanceof' is not an object

I can put a dynamic photo in google maps marker

I'm submitting a ... (check one with "x")

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS

Expected behavior:
I need to put custom photos in the marker, each user plotted on the map would colacaria your photo.

Would you like to do this using the plugin? If so would you have an example of how to do it?

Ionic AdmobPro

I'm using Ionic with this plugin and AdmobPro Plugin. When both are actives, after Admob has started, you can not see the maps. A colorized layer that can not be stylized of the Admob Plugin is above map layer.