Cordova-plugin-googlemaps: Custom infoWindow

[xloading]

Dear Masashi and All,

First of all, thank you indeed for this plugin and community, it is a real pleasure to use native Google maps from Cordova/Ionic.

There is only one thing that prevents me from using this plugin in production-ready mobile app: absence of custom infoWindow support. I know, I know, that this was asked thousand times and I know about canvas workaround but imho it is just too hacky and unnatural to generate images for this purpose.

Earlier it was mentioned that it is possible to use custom JS infoWindow with plugin however I couldn't find any good code example or gist implementing such approach. I've also tried to utilize infoBubble library (https://github.com/googlemaps/js-info-bubble) developed for GoogleMaps JS API but it doesn't seem to be compatible with plugin, at least I get the following error:

Error: undefined is not an object (evaluating 'object.prototype')
http://192.168.1.34:8100/js/infobubble.js:199:32
extend@http://192.168.1.34:8100/js/infobubble.js:203:11
InfoBubble@http://192.168.1.34:8100/js/infobubble.js:37:14
http://192.168.1.34:8100/js/app.js:152:46

Could you please advise me if there is any existing solution for my issue or any plans to implement it?

Thank you a lot in advance!

[wf9a5m75]

Current possible way is only this.
https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/v1.2.5/example/DemoApp/www/pages/customInfoWindow.html

As you may know, the infoWindow is drawn in the native side, but you guys want to write your code in JavaScript side.
So another possible way is that providing infoWindow as a picture (filepath or base64 encoded, something).
In that case, the plugin might able to display an image as infoWindow.

just an example idea

map.addMarker({
  position : ... ,
  infoWindowImage: "file://...../myInfoWnd.png"    // <-- Just idea
}, function(marker) {
    marker.showInfoWindow();
})

[xloading]

Hi Masashi,

Thank you a lot for DemoApp link, I saw it some time ago but wasn't sure about compatibility with master plugin version. If you say that it is Ok, then I will definitely give it a try!

Regarding filepath/base64 images as I said - it just looks too unnatural to me and I'm somewhat afraid of text length handling headache as both title and description snippet are required in my case. If there was some gist with pre-made text processing and general styling, then it would be much more popular solution probably.

Thanks a lot once again!

[wf9a5m75]

The link are just HTML and Javascript codes, so even with the current master branch, it should work.

[GuiCarneiro]

@wf9a5m75 I tryed on Ionic 2 without Jquery, only with JS and it doesn't seem to work.

Do you know any other workaround?

[CardosoGit]

This helps you? https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1061

[wf9a5m75]

https://github.com/mapsplugin/v2.0-demo/issues/5

[wf9a5m75]

From the v2-beta supports HTML infoWindow, you can customize the InfoWindow design (or create own one. See the InfoWindow.js)

var infoWindow = new plugin.google.maps.InfoWindow();

map.addMarker({
  position: {lat: 0, lng: 0},
  draggable: true,
  title: [
    'This is <b>Html</b> InfoWindow',
    '<br>',
    '<button onclick="javascript:alert(\'clicked!\');">click here</button>',
  ].join(""),
  infoWindow: infoWindow
});

I close this issue.