Cordova-plugin-googlemaps: HtmlInfoWindow error: marker.getId is not a function

Created on 2 Aug 2017 · 19Comments · Source: mapsplugin/cordova-plugin-googlemaps

I'm submitting a ... (check one with "x")
[ ] question
[x] any problem or bug report
[ ] feature request

plugin version: (check one with "x")
[ ] 1.4.x
[x] 2.0.0-beta2

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.3.0 "Google Maps SDK for iOS"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-globalization 1.0.7 "Globalization"
cordova-plugin-googlemaps 2.0.0-beta2-20170731-1540 "cordova-plugin-googlemaps"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-sms-plugin 0.1.11 "Cordova SMS Plugin"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
cordova.plugins.diagnostic 3.6.5 "Diagnostic"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Current behavior:
I add to the map many Marker. When I try to open the HtmlInfoWindow from a marker, I get this error : Unhandled Promise rejection: marker.getId is not a function ; Zone: ; Task: null ; Value: TypeError: marker.getId is not a function

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

loadMap() {
    ...

    var htmlInfoWindow = new HtmlInfoWindow();
    htmlInfoWindow.setContent(`
        <div>test</div><br>
    `)

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
            this.cameras.map(cam => {
                let latLng: LatLng = new LatLng(cam.position_y, cam.position_x);

                this.map.addMarker({
                    position: latLng
                }).then((marker: Marker) => {
                    marker.on(plugin.google.maps.event.MARKER_CLICK).subscribe(() => {
                        htmlInfoWindow.open(marker);
                    });
                })
            })
    });
}

@ionic-nativgooglemaps fixed

Source

fatalcaron

Most helpful comment

    let position: CameraPosition<ILatLng> = {
      target: {
          lat: 40.4380638,
          lng: -3.7495761
        },
      zoom: 15,  
      tilt: 10,
      duration: 2000
    }

wf9a5m75 on 28 Aug 2017

👍2

All 19 comments

Yes, the current ionic wrapper plugin has bug. We are fixing bugs.
Until the time, you can not use HtmlInfoWindow through the ionic wrapper plugin.

wf9a5m75 on 2 Aug 2017

👍1

The current solution is using this plugin WITHOUT the ionic wrapper plugin.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/8ad7d124b5629095e4562ecb2b248c777a4a4be6/v2.0.0/For-ionic2-users/README.md

wf9a5m75 on 10 Aug 2017

Hello Masashi Katsumata,
I am using ionic-3 and I am getting same error.

"Error: Uncaught (in promise): TypeError: marker.getId is not a function TypeError: marker.getId is not a function

cordova plugin list
com.googlemaps.ios 2.3.0 "Google Maps SDK for iOS"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-googlemaps 2.0.0-beta3-20170811-1937 "cordova-plugin-googlemaps"
cordova-plugin-nativestorage 2.2.2 "NativeStorage"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Thanks for great repository.

reliy0n on 17 Aug 2017

@ ionic-native/google-maps plugin has been not updated yet.

wf9a5m75 on 17 Aug 2017

👍1

Is the option to disable "mapToolbar" working in the ionic wrapper plugin?

thezakman on 23 Aug 2017

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/class/Map/setOptions/README.md#mapsetoptions

wf9a5m75 on 23 Aug 2017

👍1

https://github.com/ionic-team/ionic-native/blob/master/src/%40ionic-native/plugins/google-maps/index.ts#L28

wf9a5m75 on 23 Aug 2017

Well, i set the boolean to false and still get the maptoolbar on my map, is there anything else that i need to do in order to get rid of it?

thezakman on 23 Aug 2017

Ionic info

cli packages: (C:\Users\HP\Cheeper-1-0-3node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 6.5.0

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.0

System:

Node : v7.10.0
npm  : 4.6.1
OS   : Windows 7

cordova plugin list

cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-buildinfo 1.1.0 "BuildInfo"
cordova-plugin-calendar 4.6.0 "Calendar"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-customurlscheme 4.3.0 "Custom URL scheme"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-facebook4 1.9.1 "Facebook Connect"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-googlemaps 2.0.0-beta3-20170820-2025 "cordova-plugin-googlemaps"
cordova-plugin-headercolor 1.0 "HeaderColor"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-nativestorage 2.2.2 "NativeStorage"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"
cordova-universal-links-plugin 1.2.1 "Universal Links Plugin"
es6-promise-plugin 4.1.0 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"

thezakman on 23 Aug 2017

How did you write your code?
And you should not ask another question on this thread.
The original questioner asked about HtmlInfoWindow, not mapToolbar.
You should create another issue.

wf9a5m75 on 23 Aug 2017

👍1

I'm sorry @wf9a5m75 , I posted a issue with the code: https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1665

thezakman on 23 Aug 2017

Thank you.

wf9a5m75 on 23 Aug 2017

The bug was fixed in the @ionic-native/core and @ionic-native/google-maps ver4.2.0

Please reinstall these two packages.

https://www.npmjs.com/package/@ionic-native/core
https://www.npmjs.com/package/@ionic-native/google-maps

wf9a5m75 on 26 Aug 2017

🎉2

Hi, I reinstall these two packages and now I have this, before it worked, I have not touched anything of code.
What can be Happening?
Thanks.

Generic type 'CameraPosition' requires 1 type argument(s).

 L166:  goMyPosition():void{
 L167:    let position: CameraPosition = {
 L168:      target: {

El 26 ago 2017, a las 18:55, Masashi Katsumata notifications@github.com escribió:

The bug was fixed in the and ver4.2.0

Please reinstall these two packages.

https://www.npmjs.com/package/@ionic-native/core https://www.npmjs.com/package/@ionic-native/core
https://www.npmjs.com/package/@ionic-native/google-maps https://www.npmjs.com/package/@ionic-native/google-maps
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1607#issuecomment-325146468, or mute the thread https://github.com/notifications/unsubscribe-auth/AU_NfenYu5KEfJ0qGTiekjirihq6-_BGks5scE4DgaJpZM4OrqdA.

javi124 on 27 Aug 2017

Could you show me more code?

wf9a5m75 on 27 Aug 2017

Yes, here it is.
Thanks.

import { Component } from '@angular/core';

import { Geolocation, Geoposition } from '@ionic-native/geolocation';

import { NavController, AlertController, LoadingController, Platform } from 'ionic-angular';

import {SuperTabsController} from "ionic2-super-tabs";

//import {AgmCoreModule} from '@agm/core';

import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 GoogleMapOptions,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker,
 HtmlInfoWindow
} from '@ionic-native/google-maps';

@Component({
  selector: 'page-map',
  templateUrl: 'map.html',

})
export class MapPage {
  public title: string = 'Mapa';
  public lat: number = 39.499443;
  public lng: number = -5.0142302 ;
  public myLat: number = 41.650387;
  public myLng: number = -0.913866;
  public zoom: number = 7;
  public maxZoom:number =  20;
  public minZoom:number = 8;
  public map: GoogleMap;
  public mapElement: HTMLElement;
  public myPosition: any;



  private banner:string;


  private changesConfig: boolean;




  constructor(

    private alertCtrl: AlertController,
    private geolocation: Geolocation,
    public googleMaps: GoogleMaps,
    public loadingCtrl: LoadingController,
    private platform: Platform,
    private superTabsCtrl: SuperTabsController,
    private navCtrl : NavController) {
   }




  ionViewWillEnter():void{
   this.getCurrentPosition(); 


  }

getCurrentPosition(){
    this.geolocation.getCurrentPosition()
    .then((position) => {
      this.myPosition = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
      this.loadMap();
    })
    .catch(error=>{
      console.log(error);
    })
  }

  loadMap(){
    // create a new map by passing HTMLElement
     this.mapElement = document.getElementById('map');

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 40.4380638,
          lng: -3.7495761
        },
        zoom: 10,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create(this.mapElement, mapOptions);




    this.map.one(GoogleMapsEvent.MAP_READY).then(()=>{
      console.log('Map is ready!');

      // move the map's camera to position


   //let htmlInfoWindow = new HtmlInfoWindow();
   //   htmlInfoWindow.setContent('<div>Test</div>');   

 this.map.addMarker({
            title: 'Hello',
            icon: {url: "assets/icon/icon-1.png"},
            animation: 'DROP',
            position: {
              lat: 40.4380638,
              lng: -3.7495761
            }
          })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                alert('clicked');
              });
          });
       });



    }





 goMyPosition():void{

    let position: CameraPosition = {
      target: {
          lat: 40.4380638,
          lng: -3.7495761
        },
      zoom: 15,  
      tilt: 10,
      duration: 2000
    }

    this.map.animateCamera(position);
 /* .catch((error) => {
      alert('Error al geolocalizar :' + error);
    });*/

      }

  }

javi124 on 27 Aug 2017

    let position: CameraPosition<ILatLng> = {
      target: {
          lat: 40.4380638,
          lng: -3.7495761
        },
      zoom: 15,  
      tilt: 10,
      duration: 2000
    }

wf9a5m75 on 28 Aug 2017

👍2

I had the same problem and after following the instructions the error has been resolved. However now I am getting a new error when using multiple htmlinfowindows and closing them all before opening a new one:

Uncaught (in promise): TypeError: map.off is not a function. (In 'map.off("infoPosition_changed")', 'map.off' is undefined)

I am using ionic-native/google-maps with ionic 3. I suspect that this is caused by either the ionic native plugin being outdated again or a problem with the code in the cordova google maps plugin itself.