Info window templates for google maps sdk in angular

plugins
#1

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>
</GridLayout>

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

   <maps:mapView mapReady="onMapReady">
        <!-- Default Info Window Template -->       		
        <maps:mapView.infoWindowTemplate>
            <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"  />
            </StackLayout>
        </maps:mapView.infoWindowTemplate>
        <!-- Keyed Info Window Templates -->   
        <maps:mapView.infoWindowTemplates>
            <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" />
                </StackLayout>
            </template>
        </maps:mapView.infoWindowTemplates>
    </maps:mapView>

How would you integrate infoWindowTemplate?

#2

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

Thanks,
Dem

#3

No i did not. Do you have any insights?

#4

Hello,
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

Cheers,
Dem

#5

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!