Ionic: use HtmlInfoWindow in native cordova-plugin-googlemaps

Ionic Native
1

I use cordova-plugin-googlemaps in my app. https://ionicframework.com/docs/native/google-maps/

My code:

 loadMap() {

    var element: HTMLElement = document.getElementById('map');
    var map: GoogleMap = this.googleMaps.create(element);
    map.one(GoogleMapsEvent.MAP_READY).then(() => {

      var ionic: LatLng = new LatLng(50.5279314,30.2317489);

      var position: CameraPosition = {
        target: ionic,
        zoom: 10,
      };
      map.moveCamera(position);

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

      map.addMarker({
        position: new LatLng(50.5279314,30.2317489),
      }).then((marker: Marker) => {
        marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
          htmlInfoWindow.open(marker);
        });
      });

    });

  }

When I try to open HtmlInfoWindow, i get errors. Help, please:

console.error: Unhandled Promise rejection: marker.bindTo is not a function. (In ‘marker.bindTo(“infoWindowAnchor”, self)’, ‘marker.bindTo’ is undefined) ; Zone: ; Task: null ; Value: [object Object] http://192.168.0.104:8102/plugins/cordova-plugin-googlemaps/www/HtmlInfoWindow.js:233:22 fromLatLngToPoint@http://192.168.0.104:8102/plugins/cordova-plugin-googlemaps/www/Map.js:620:26 open@http://192.168.0.104:8102/plugins/cordova-plugin-googlemaps/www/HtmlInfoWindow.js:229:26 http://192.168.0.104:8102/build/vendor.js:56416:25 t@http://192.168.0.104:8102/build/polyfills.js:3:15045 tryNativePromise@http://192.168.0.104:8102/build/vendor.js:56415:31 http://192.168.0.104:8102/build/main.js:85:40 __tryOrUnsub@http://192.168.0.104:8102/build/vendor.js:31152:20 next@http://192.168.0.104:8102/build/vendor.js:31099:34 _next@http://192.168.0.104:8102/build/vendor.js:31039:30 next@http://192.168.0.104:8102/build/vendor.js:31003:23 listener@http://192.168.0.104:8102/plugins/cordova-plugin-googlemaps/www/BaseClass.js:60:21 dispatchEvent@[native code] trigger@http://192.168.0.104:8102/plugins/cordova-plugin-googlemaps/www/BaseClass.js:43:27 _onMarkerEvent@http://192.168.0.104:8102/plugins/cordova-plugin-googlemaps/www/Map.js:982:23 nativeCallback@http://192.168.0.104:8102/plugins/cordova-plugin-googlemaps/www/googlemaps-cdv-plugin.js:313:32 nativeCallback@[native code] dispatchEvent@[native code] fireDocumentEvent@http://192.168.0.104:8102/cordova.js:235:35 global code@http://192.168.0.104:8102/:1:37

2

This pull request should fix this issue.

3

The pull request has been accepted. Please reinstall the plugin.

4

When I try to use

this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
    var htmlInfoWindow = new HtmlInfoWindow();
})

I got this error message: GoogleMaps.getPlugin(…).HtmlInfoWindow is not a constructor

I use the lastest plugin and every package is up to date

An idea of ​​why ?

1 Like
5

I am getting the same error.

6

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

There is a new version of Google-Maps-Sdk without the ionic wrapper. I didn’t test it but try your luck

2 Likes
7

Here is current (@ionic-native/google-maps@4.4.2) way.