How do I add a google map to a lit-element?

Question

I know google-maps component is a polymer 3 component, but it seems to depend on all the Polymer 3 stuff, Polymer project says start with lit-element (polymer 3+), so I want to use lit-element, but want a map on my component. How do I do this?

Background:

If you read the roadmap here - https://www.polymer-project.org/blog/2018-05-02-roadmap-update it says don't start a new project with Polymer 3, instead start with Lit-Element.

It also talks about the future of elements - https://www.polymer-project.org/blog/2017-11-27-future-of-elements.html where they are not doing much with them right now until they rewrite them.

So given this, right now if we are trying to build a component using Lit-Element, how do we incorporate google maps, I cant find a single example anywhere. I tried to use the Polymer Google Map component and it is not compatible and has a bunch of errors.

Answer 1

Take a look at this: https://github.com/jakelheknight/google-maps-limited

Not much out there but this is probably what you are looking for.

Answer 2

Some time ago I rewrited Polymer Google Map component to use Lit instead. You may take a look: lit-google-map