Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ghost opened this issue May 24, 2024 · 2 comments
Labels
type: question Request for information or clarification. Not an issue.

Comments

@ghost
Copy link

ghost commented May 24, 2024

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!

@ghost ghost added triage me I really want to be triaged. type: question Request for information or clarification. Not an issue. labels May 24, 2024
@wangela
Copy link
Member

wangela commented May 24, 2024

If you would like to upvote the priority of this issue, please comment below or react on the original post above with 👍 so we can see what is popular when we triage.

@WoodLandDevs Thank you for opening this issue. 🙏
Please check out these other resources that might help you get to a resolution in the meantime:

This is an automated message, feel free to ignore.

@usefulthink usefulthink removed the triage me I really want to be triaged. label Oct 10, 2024
@usefulthink
Copy link
Contributor

Closing this as it is unrelated to the @googlemaps/js-api-loader package.

The AdvancedMarkerElement doesn't support the Animations that the Marker class did. Instead, you can freely define your own animations using css-animations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: question Request for information or clarification. Not an issue.
Projects
None yet
Development

No branches or pull requests

2 participants