Custom infoWindow

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();
})

[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.