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

Help please, the InfoWindows does't work #123

Open
wecodexoficial opened this issue Mar 2, 2022 · 5 comments
Open

Help please, the InfoWindows does't work #123

wecodexoficial opened this issue Mar 2, 2022 · 5 comments

Comments

@wecodexoficial
Copy link

No description provided.

@wecodexoficial
Copy link
Author

Hello, good afternoon,
Thank you very much for your project,
I have a problem that I would like to know if you can help me

I am trying to use the Infowindows component, but when clicking on the marker, it does not perform any action, nor does it return any error

@chantouchsek
Copy link
Owner

chantouchsek commented Mar 6, 2022

@wecodexoficial
Copy link
Author

@chantouchsek
Yes, I tried it with the demo, but the toggleInfoWindow function doesn't work.
I tried to solve the problem, but I can't

Thanks for your reply

@chantouchsek
Copy link
Owner

@wecodexoficial can you show me you code, that you implemented?

the event name should one of below:

  • info-window-clicked
  • info-window:clicked

@chantouchsek
Copy link
Owner

@wecodexoficial did you try the code below?

<template lang="html">
  <div class="info-windows">
    <google-map id="map" ref="Map">
      <google-map-marker
        :key="index"
        v-for="(info, index) in infoWindowsList"
        :position="info.position"
        @click="toggleInfoWindow(info)"
      />
      <google-map-infowindow
              v-for="(info, index) in infoWindowsList"
              :key="`info-window-${index}`"
              :position="info.position"
              :show.sync="showInfo"
              :options="{maxWidth: 300}"
              @info-window-clicked="infoClicked($event, info)"
      >
        <h4 >{{infoWindowContext.title}}</h4>
        <p>{{infoWindowContext.description}}</p>
      </google-map-infowindow>
    </google-map>
  </div>
</template>

<script>
import cities from '../assets/cities.json'
export default {
  data () {
    return {
      showInfo: true,
      infoWindowContext: {
        title: 'Hello world',
        description: 'Description',
        position: {
          lat: 44.2899,
          lng: 11.8774
        }
      },
      infoWindowsList: cities
    }
  },
  methods: {
    toggleInfoWindow (context) {
      this.infoWindowContext = context
      this.showInfo = true
    },
    infoClicked(context, spot) {
      console.log('infoClicked', context, spot)
    }
  }
}
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants