Heatmap Layer support

[JoseGoncalves]

Do you have any plans to add a component for the Heatmap Layer?

[HusamElbashir]

Hey @JoseGoncalves

Can't say I have plans for that at the moment. There are a couple of other issues that I'd like to prioritize when I have some free time.
If someone wants to take a stab at a PR I'll be happy to provide support. Otherwise will look into this when I'm done with the higher priority items on my list.

[JoseGoncalves]

No TS skills here, so I'll not be capable of doing a PR... I'm going to add that support in JS for my current needs and (eagerly) wait for a proper implementation from your side...

[chemeng]

Hi @JoseGoncalves, did you get this working using the package (accessing some underlying component/reference) or through the plain vanilla JS implementation?

[JoseGoncalves]

Hi @chemeng, still did not hat time to address this... nevertheless, my idea is simply to use the Advanced Usage's third pattern as a base to initialize and use the Google's Heatmap Layer.

[JoseGoncalves]

@husamibrahim Any idea when you'll have time to implement this feature?

[HusamElbashir]

Hello @JoseGoncalves

Apologies for the late response. Things were quite busy at work and in my personal life these last couple of weeks. I'll take a stab at this soon hopefully.

[HusamElbashir]

Added in v0.14.0. Documentation to be added soon but basic syntax is:

  <GoogleMap
    api-key="API_KEY"
    :libraries="['visualization']"
    style="width: 100%; height: 500px"
    :center="center"
  >
    <HeatmapLayer :options="{ data: heatmapData }" />
  </GoogleMap>

Note that for convenience you can pass an array of plain lat/lng object literals instead of LatLng class instances (you can pass those too or mix object literals with LatLng instances in the data array if you wish).

Let me know if you notice any bugs.

[JoseGoncalves]

Hi @husamibrahim. Thanks, I'll test that in the next week.

[JoseGoncalves]

Hi @husamibrahim. I've tested this and, while it's working, I get some warnings on the browser console:

You can check a demo project were these warnings occur at:

• https://github.com/JoseGoncalves/vue-google-maps/tree/heatmap

[HusamElbashir]

Thanks for reporting @JoseGoncalves. Will look into it.
Feel free to create an issue if you wish.

[HusamElbashir]

Fixed in v0.14.1

[chemeng]

Got it, makes sense. Will probably try the same thing in the next few days. On Jun 6, 2022, at 11:34 AM, José Miguel Gonçalves ***@***.******@***.***>> wrote: Hi @chemeng<https://github.com/chemeng>, still did not hat time to address this... nevertheless, my idea is simply to use the Advanced Usage<https://vue3-google-map.netlify.app/advanced-usage/> third pattern as a base to initialize and use the Google's Heatmap Layer<https://developers.google.com/maps/documentation/javascript/heatmaplayer>. — Reply to this email directly, view it on GitHub<#76 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAJ2XGPQQHRN6E2JANUQYX3VNWZ3FANCNFSM5W4M3RNQ>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[JoseGoncalves]

@chemeng This feature is already implemented in the library. Please check #76 (comment)

[chemeng]

Yes, thank you, we've started using it.