Skip to content

How does one get the marker to bounce with out using google.maps.Animation.BOUNCE in Vue and Typescript? #847

Closed
@ghost

Description

Environment details

  1. Specify the API at the beginning of the title (for example, "Places: ...") No API
  2. OS type and version Mac OS Ventura 13.4.1

How does one get the marker to bounce with out using google.maps.Animation.BOUNCE?
google.maps.Animation.BOUNCE is forcing me to run into "npm run build" errors.

Steps to reproduce

  1. Run 'npm create vue@latest'
  2. Run 'npm install @googlemaps/js-api-loader' in side the newly created Vue project
  3. Copy and paste code sample below in to App.vue

Code example

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Loader } from "@googlemaps/js-api-loader"
const loader = new Loader({
  apiKey: "",
  version: "weekly"
});

const isMarkerBouncing = ref(false);
const mapOptions = {
  center: { lat: 0, lng: 0 },
  zoom: 4,
  mapId: "DEMO_MAP_ID"
};

onMounted(() => {
  loader
    .importLibrary('maps')
    .then(async ({ Map }) => {
      const map = new Map(document.getElementById("map"), mapOptions);
      const { AdvancedMarkerElement } = await loader.importLibrary('marker');
      let advancedMarker = new AdvancedMarkerElement({ map, position: mapOptions.center });
      advancedMarker.addListener('click', markerClick());
    });
})

const markerClick = () => {
  console.log('marker was clicked');
}

const button = () => {
  console.log('button was clicked');
}

</script>

<template>
  <div id="map" style="width: 500px; height: 500px; background-color: green"></div>
  <button @click="button()">Button</button>
</template>

Any guidance is appreciated. Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    type: questionRequest for information or clarification. Not an issue.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions