Keyed Info Window Template support about nativescript-google-maps HOT 10 CLOSED

OK, the good news is that the info window is shown for each type of template. The less-than-good news is that none of the formatting from the .scss file is applied, which would be expected I suppose given we're assigning the template text directly. This is good enough to keep me going but I'm hoping that keyed info window templates is something you can add in the coming weeks. I'll be glad to help with this, at least with the testing.

from nativescript-google-maps.

Hi, The Kyed template doesn't work since NS 7 and I did not have the time to investigate it, but try to set it from the js side.

I didi not try it but you can try with those property exposed to the maps

public infoWindowTemplate: string | Template;
public infoWindowTemplates: string | Array<KeyedTemplate>;

marker.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>`;

from nativescript-google-maps.

@kefahB - as always, thanks for the prompt response.

Given that mine is a JavaScript project, what should I add to (presumably) map-page.js?

from nativescript-google-maps.

Yes

from nativescript-google-maps.

To be more specific:

public infoWindowTemplate: string | Template;
public infoWindowTemplates: string | Array<KeyedTemplate>;

is TypeScript, and is not valid in my JavaScript project. I receive Declaration or statement expected messages.

from nativescript-google-maps.

You wont use those, you will use them from marker. infoWindowTemplates =YOUR XML TEMPLATE``

marker.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>`;

// THEN TRY TO ADD YOUR TEMPLATE

marker.infoWindowTemplate = 'testWindow';

Like I sed, I imagine how it does work and I didn't tested it

from nativescript-google-maps.

Ah, I understand. I'll play with this and let you know how it goes. Thanks again.

from nativescript-google-maps.

@dlcole I'll try to bring a little time to do some stuff on this but I have also a lot of migrations to do and have my business also :)

from nativescript-google-maps.

@kefahB Any progress on this issue? I'll need to publish my app next month and it would be really great if this could be working. Is there anything I can contribute on my end?

from nativescript-google-maps.

I investigated this further and got it working. The dapriett version of this plugin includes this warning:

[!WARNING] if you are using NS7 infoWindowTemplate won't work from a xml file! a temporary solution will be declaring infoWindow Template from the code behind like this :

I followed that example but for keyed info window templates:

var mapView;

export function onMapReady(args) {
  mapView = args.object;

  // Define custom map marker templates
  mapView.infoWindowTemplates =  
  `<template key="infoWindow">
     <StackLayout orientation="vertical" width="250" height="160">
       <Label textWrap ="true" class="info-title" text="{{ title }}" />
       <Label class="info-snippet" textWrap="true" text="{{ snippet }}" />
       <Label class="info-text" textWrap ="true" text="{{ info }}" />
     </StackLayout>
   </template>
   <template key="mapGroupWindow">
     <StackLayout orientation="vertical" width="200" height="100"> 
       <Label class="info-title" textWrap ="true" text="{{ title }}" />
       <Label class="info-date" textWrap="true" text="{{ snippet }}" />
       <Label class="info-since" textWrap ="true" text="{{ info }}" />
       <Label class="info-since" textWrap ="true" text="{{ speed }}" />
     </StackLayout>
   </template>
   <template key="weatherWindow">
     <StackLayout orientation="vertical" width="270" height="120"> 
       <Label textWrap ="true" class="info-title" text="{{ title }}" />
       <Label class="info-snippet" textWrap="true" text="{{ snippet }}" />
       <Label class="info-text" textWrap ="true" text="{{ info }}" />
     </StackLayout>
   </template>`;

This now lets me access and format the various info windows as desired. So, you can use keyed info window templates, you just have to specify them in the mapReady event handler. As such, I'll close this issue.

from nativescript-google-maps.