Custom Info Window in Maps


#1

Hey there,

I’m using the current version (V2) of the cordova-plugin-googlemaps.
I want to have a custom info window when clicking on a marker. Currently I’m trying this with the HtmlInfoWindow property.
I’m using the ionic template to render the HTML with Ionic elements but somehow the data binding didn’t work.
I already created an issue but the developer couldn’t help me there.
This is what my implementation looks like:

var htmlInfoWindow = new plugin.google.maps.HtmlInfoWindow();
    var html =
      `
      <ion-avatar item-left>
      <img src="{{selectedReport.pinImage}}"/>
        </ion-avatar>
        <h2>{{selectedReport.typeString}}</h2>
    </ion-item>

    <ion-card-content>
    <ion-item>
    <ion-label text-wrap>{{selectedReport.description}}</ion-label>
    </ion-item>
    <ion-item>
    <ion-label text-wrap>{{selectedReport.address}}</ion-label>
    </ion-item>
    </ion-card-content>
    </ion-card>`
    htmlInfoWindow.setContent(html);

Maybe someone will have another solution?

Thank you for help L)


#2

it won’t work , setContent function turn everything into string !