how to use from within another lit-element?

jnylund commented 5 years ago

First, thanks for writing this, its awesome! I am having trouble passing markers from within another element.

I tried using:

  <google-maps-limited apiKey="AIzaSyCT3TxI-zpsvF1n3Z33GZTOkB3c5eSDVMk" markers=${this.mapMarkers}>
                   </google-maps-limited>

where markers is set in my constructor:

 this.mapMarkers  = [
          {
            position: {lat:41, lng:-112},
            InfoWindowContent: "<h3>The Salt Lake City, UT Temple</h3>"
          },
          {
            position: {lat:33, lng:-117},
            InfoWindowContent: "<h3>The San Diego, CA Temple</h3>"
          },
          {
            position: {lat:29, lng:-82},
            InfoWindowContent: "<h3>The Orlando, FL Temple</h3>"
          },
          {
            position: {lat:43, lng:-70},
            InfoWindowContent: "<h3>The Cape Elizabeth, ME Temple</h3>"
          }
        ]

But no markers show up, in the debugger the markers come through as strings (not an array of ojbects), I have tried quoting and no quotes.

I also tried putting the script inside the template like your example and nothing came through that way.

Any ideas of what I could be doing wrong?

jakelheknight commented 5 years ago

Sorry for such a late response I was on a release this month. One issue is the markers have to be assigned as props not as an attribute. When you pass them in as an attribute they are sent as a string. I could add code to pars the attribute on instantiation if that would still be helpful or you could grab a reference and add props.

this.shadowRoot.querySelector('google-maps-limited').markers =  [
          {
            position: {lat:41, lng:-112},
            InfoWindowContent: "<h3>The Salt Lake City, UT Temple</h3>"
          },
          {
            position: {lat:33, lng:-117},
            InfoWindowContent: "<h3>The San Diego, CA Temple</h3>"
          },
          {
            position: {lat:29, lng:-82},
            InfoWindowContent: "<h3>The Orlando, FL Temple</h3>"
          },
          {
            position: {lat:43, lng:-70},
            InfoWindowContent: "<h3>The Cape Elizabeth, ME Temple</h3>"
          }
        ]

Right now with the limitations of lit element I am using setters and getters so you have to set prop with the assignment operator (=). This may change in the future.

jnylund commented 5 years ago

Thanks that works, if I set it before I open the map. If I set once the map is open, it doesn't seem to update the marker. Is that possible?

jakelheknight commented 5 years ago

Your pr clears the markers. Nice catch. Sorry I didn't see it earlier. Space cadet moment. I think the added functionality is fine but it needs to be behind a flag since it would interfere with some of the other things I am currently using this for.

jnylund commented 5 years ago

Sounds good, would you like me to change and resubmit, or you going to integrate?

jakelheknight commented 5 years ago

I can integrate it. Ill get to it on monday.

jakelheknight commented 5 years ago

Would you like it to clear all other markers when a user marker is added or just add one? Right now it would sort of add one but it would break other behavior because we would loose our reference to the other markers.

jnylund commented 5 years ago

It would be great if there was a flag where sometimes it can add , other times it clears , for my current use case I need it to clear all others. Thx Joel

Sent from my iPhone

On Feb 4, 2019, at 12:10 PM, Jacob Knight notifications@github.com wrote:

Would you like it to clear all other markers when a user marker is added or just add one? Right now it would sort of add one but it would break other behavior because we would loose our reference to the other markers.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

jnylund commented 5 years ago

Hi Jake,

I saw your latest commits, and would love to check them out, I also saw another pull request that had a bunch of stuff in it, but if you can incorporate the part that includes the latest version of lit-element:

just change:

import {html, LitElement} from '@polymer/lit-element'; to: import {html, LitElement} from 'lit-element’;

and update package.json.

thx Joel

On Feb 4, 2019, at 12:24 PM, Joel Nylund jnylund@yahoo.com wrote:

It would be great if there was a flag where sometimes it can add , other times it clears , for my current use case I need it to clear all others. Thx Joel

Sent from my iPhone

On Feb 4, 2019, at 12:10 PM, Jacob Knight <notifications@github.com mailto:notifications@github.com> wrote:

Would you like it to clear all other markers when a user marker is added or just add one? Right now it would sort of add one but it would break other behavior because we would loose our reference to the other markers.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jakelheknight/google-maps-limited/issues/8#issuecomment-460330157, or mute the thread https://github.com/notifications/unsubscribe-auth/AACwHOSRjvBjqKsKmzhpNyDSlsK48Ey7ks5vKGl9gaJpZM4YaEeE.

jakelheknight / google-maps-limited

how to use from within another lit-element? #8