gmp-advanced-marker neither draggable nor clickable

Question

working with the google maps web component. https://developers.google.com/maps/documentation/javascript/web-components/overview

I have this code

        <div class="map-container">
            <gmp-map
                center="39.46598273118431,-0.3835740844457525"
                zoom="12"
                map-id="DEMO_MAP_ID"
            >
                <gmp-advanced-marker
                    position="39.46598273118431,-0.3835740844457525"
                    title="Resto"
                    gmpDraggable="true"
                ></gmp-advanced-marker>
            </gmp-map>
        </div>

        <script>
            const m = document.querySelector("gmp-advanced-marker");
            m.addEventListener("gmp-click", (evt) => {
                console.log(evt);
            });
        </script>

the marker is rendered correctly, but it is not draggable, and nor does the gmp-click event fire when I click the marker.

Any ideas what I've got wrong

Update: not clickable explained by Google Maps Javascript API draggable markers don't trigger neither "click" nor "gmp-click" event on touch devices Still can't get draggable though

Answer 1

From what I can see, there's nothing particularly wrong about your code.

Still, I'd make sure to run the scripts only after the map has been properly loaded (e.g. via the inline script callback):

<script async src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=maps,marker&v=beta">
</script>

Also, since you're using addEventListener("gmp-click", ...), make sure you're on the beta channel.

Putting it together, your click events should now work:

function initMap() {
  const m = document.querySelector("gmp-advanced-marker");
  
  // the `beta` APIs are now loaded -> gmp-clicks can now be registered
  m.addEventListener("gmp-click", (evt) => {
    console.log('addEventListener gmp-click event', evt);
  });
}

Finally, I couldn't determine why the marker isn't draggable by inline-setting gmpDraggable="true". Likely a beta bug? Nonetheless, you can manually set this properly on the web component and this seems to work fine:

function initMap() {
  const m = document.querySelector("gmp-advanced-marker");
  
  // note that `m.setOptions({ draggable: true})` won't work here...
  m.gmpDraggable = true;

  // returns void
  m.addListener("dragend", (evt) => {
    console.log('dragend evt', evt);
  });
}

Here's a JSFiddle repro.