Info window templates for google maps sdk in angular



I have google maps plugin running in my angular app, and i’m trying to use the custom info window option, but I can’t figure out how to convert the code sample to the angular version.

My working version without the info window:

<GridLayout rows="*" columns="*">
    <MapView [latitude]="42" [longitude]="42" [zoom]="8" (mapReady)="onMapReady($event)"></MapView>

A snippet from the plugin’s page with the info window:

   <maps:mapView mapReady="onMapReady">
        <!-- Default Info Window Template -->       		
            <StackLayout orientation="vertical" width="200" height="150" >
                <Label text="{{title}}" className="title" width="125"   />
                <Label text="{{snippet}}" className="snippet" width="125"   />
                <Label text="{{'LAT: ' + position.latitude}}" className="infoWindowCoordinates"  />
                <Label text="{{'LON: ' + position.longitude}}" className="infoWindowCoordinates"  />
        <!-- Keyed Info Window Templates -->   
            <template key="testWindow">
                <StackLayout orientation="vertical" width="160" height="160" >
                    <Image src="res://icon" stretch="fill"  height="100" width="100" className="infoWindowImage" />
                    <Label text="Let's Begin!" className="title" />

How would you integrate infoWindowTemplate?


Did you solve this? I’m also looking for a solution…



No i did not. Do you have any insights?


this is the only solution I could make it work:

However, I didn’t use that solution at the end as I needed a dynamic sized window and that doesn’t work, so I ended up opening a modal panel when the user tap on a marker



That is interesting because I just found this link and was going to reply here with it. His method worked perfectly, and i also need dynamic sized window, but if necessary, i’ll take the dimensions from NativeScript’s on ngOnInit() because it’s the only viable way- I can’t use a modal.

Best of luck with your project!