Well that WebComponent from Google sucks !!

Hahaha yeah

Ever figure anything out with it @Jacob Overgaard ?

yeah, so the component is not part of that package but part of a more basic google maps api, so I cant see the source, but I found a way to spin up the base component and whaddayaknow it works there, but it's a little tedious... anyway, if you plop this into https://lit.dev/playground/ (just replace everything in the default greeting element), it should work:

ts
import {html, css, LitElement} from 'lit';
import {customElement, property, query} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  value = '';
  
  marker?: any;
  
  async firstUpdated() {
    await import('https://maps.googleapis.com/maps/api/js?key=API-KEY&v=beta')
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    const map = new Map(this.shadowRoot.getElementById('map') as HTMLElement, {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    this.marker = new AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        gmpDraggable: true
    });
    
    this.marker.addListener('dragend', this.dragend.bind(this));
  }
  
  dragend() {
    console.log('marker', this.marker.position);
    this.value = `${this.marker.position.lat},${this.marker.position.lng}`;
  }

  render() {
    return html`
        <p>${this.value}</p>
        <div style="height:300px; width:100%;" id="map"></div>
       `;
  }
}

(you have to provide your own api key in the import statement)