Disable polygon hover

[ronsu]

Hi,

I was wondering if there was a way to disable polygon hover? I can change polygon fill opacity and stroke opacity in general but on hover I can change only fill opacity. Now if I hover on the polygon, the stroke (which opacity is set to 0) pops on full opacity. Can I change the stroke’s hover opacity or better, disable hover completely?

[Dylan]

Hi there,

Thank you so much for getting in touch, we do appreciate your time.

Unfortunately, this is not supported by default. However, I do believe we should be able to provide you with a bit of custom JavaScript to achieve the required result.

Would you be open to sharing a link to your website (map page) so that I can ensure the script I create works well with your set up?

I look forward to hearing back from you.

[ronsu]

This reply has been marked as private.

[Dylan]

Hi there,

Thank you for confirming your website link.

Please add the following custom JavaScript to your site:

jQuery(function($){
  $(window).load(function(){
     if(typeof WPGM_Path_Polygon !== 'undefined'){
      for(var i in WPGM_Path_Polygon){
        google.maps.event.clearListeners(WPGM_Path_Polygon[i]);
      }
     }
  });
});

I believe this will remove the hover functionality from the polygons.

This can be added under Maps > Settings -> Advanced -> Within the Custom JavaScript block.

I hope this helps?

[ronsu]

This works perfectly! Thank you!
One less crucial thing: is it possible to change hover cursor? Now it’s pointer and because it’s not clickable, it would be nice to change it to default.

[Dylan]

Hi there,

Fantastic news, so glad to hear that helped!

Yes, this can be achieved by changing the following section of the snippet I shared previously:

for(var i in WPGM_Path_Polygon){
  google.maps.event.clearListeners(WPGM_Path_Polygon[i]);
}

To this instead:

for(var i in WPGM_Path_Polygon){
  google.maps.event.clearListeners(WPGM_Path_Polygon[i]);
  WPGM_Path_Polygon[i].setOptions({clickable: false});
}

This will force the map engine to ignore the original click handlers which are assigned to the polygons, which disables the cursor change.

I hope this helps?

[ronsu]

Perfect! Thank you again for the fast answer!

[Dylan]

Only a pleasure, glad to hear that helped! 🙂

Have a great day further.

[Foomagoo]

I’m looking to achieve the same thing but this piece of Javascript has no affect on my polygons. jQuery(window).load is not a valid event on jQuery > version 3. I replaced that call with jQuery(window).on("load", function {

But that throws an error that WPGM_Path_Polygon is undefined if I call
console.log(WPGM_Path_Polygon);

And without it nothing happens because WPGM_Path_Polygon is undefined.

[Foomagoo]

So I decided to try a setTimeout call to see if the function was just being called to early. After 3 seconds the WPGM_Path_Polygon array is set but it has a length of 0. So I’m not sure where to go from here to remove the polygon hover events.

[Foomagoo]

After doing more searching I was able to find the solution I was after in this topic https://www.wpgmaps.com/forums/topic/polygon-mouse-hover-2/.

[Matthew]

Hi @Foomagoo,

Thank you for getting in touch with us, we do appreciate your time.

We are happy that you managed to find the solution in one of our other threads.

Should you ever require any further assistance, I am more than happy to help.

Have a fantastic day further!

Kindest Regards,
Matthew

[Author]

Posts