inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
280 stars 57 forks source link

Add Info Window #38

Closed yankeeinlondon closed 2 years ago

yankeeinlondon commented 3 years ago

Adding the Info Windows feature to this repo is a feature-request for this library. We are happy to accept PR's for this work as there is not immediate demand internally for this feature but we do understand why it might be useful and it will eventually be incorporated.

Baroshem commented 2 years ago

Any news on it? I would really like to have the info windows feature as I really enjoyed using the package so far :)

web-programmer-here commented 2 years ago

+1 for this feature too, it is going to be very useful

yankeeinlondon commented 2 years ago

We're not currently using this functionality so it's not getting a ton of attention but would you consider adding in a pull request? Probably the fastest way to getting this in.

HusamElbashir commented 2 years ago

Added in v0.8.4. Can be used like this:

<InfoWindow :options="{ position, content: 'Your content here' }" />

Or like this:

<InfoWindow :options="{ position }">
Your content here
</InfoWindow>

Documentation to be added soon

Baroshem commented 2 years ago

Tested it and it works great. I have one question @HusamIbrahim. Could you tell me how can I nest a info window inside of a marker so that when I click on a marker it will open an info window?

eskiesirius commented 2 years ago

may i see the screenshot of this? i cant make this work

HusamElbashir commented 2 years ago

Could you tell me how can I nest a info window inside of a marker so that when I click on a marker it will open an info window?

This isn't possible in the current iteration @Baroshem but we can definitely add it. You can open a new issue if you like.

HusamElbashir commented 2 years ago

may i see the screenshot of this? i cant make this work

Please share a reproduction @eskiesirius. You can use https://vite.new/vue. In any case documentation will be added soon.

HusamElbashir commented 2 years ago

@Baroshem Added nesting in v0.9.0. Basic syntax is:

<Marker :options="{ position }">
  <InfoWindow>Your content here</InfoWindow>
</Marker>
Baroshem commented 2 years ago

@HusamIbrahim This is just great!

Yesterday I managed to create a workaround for the current code to utilize the marker and infowindow like following:

  <div>
    <google-marker :options="options" @click="open = !open"/>
    <info-window
      v-if="popup && open"
      :options="{ ...options, content: popup }"
      @closeclick="open = !open"
    />
  </div>

And today you just added a nested functionality that works even better.

I can now utilize the full functionality. Thank you very much!

I am really happy that I have selected your library instead of others :)

eskiesirius commented 2 years ago

may i see the screenshot of this? i cant make this work

Please share a reproduction @eskiesirius. You can use https://vite.new/vue. In any case documentation will be added soon.

It is working now.. it is great!

web-programmer-here commented 2 years ago

@HusamIbrahim this is great, thank you 🥇