Feature Proposal: Add ability to show text labels within polygons

[KZeni]

I have modified my WP Google Maps Pro so that it allows me to specify the name of a polygon to then have that shown in the center of that polygon on the map (screenshot as an example: https://cloudup.com/cTzhK9cdDOb)

I would love it if this were to be officially supported in a future version of WP Google Maps Pro. Currently, it’s hard-coded to always show the name of the polygon as a label and also has hard-coded styles, but this implementation is pretty simple & straightforward now (certainly could be integrated into the Polygon editor’s options.)

What I’ve done to make this work:
In short, I’ve added a call to https://github.com/googlemaps/js-map-label/blob/gh-pages/src/maplabel-compiled.js (unmodified & served locally) to add the ability to add labels on-demand to a Google Map.

Then, I’ve added:

        var polyLabel = new MapLabel({
            text: tmp_data['polyname'],
            position: polygon_center,
            map: MYMAP[mapid].map,
            fontSize: 12,
            fontColor: '#ffffff',
            strokeWeight: 2,
            strokeColor: '#333333',
            zIndex: 9999
        });
        polyLabel.set('position', polygon_center);

right after:

       WPGM_Path_Polygon[polygonid].setMap(MYMAP[mapid].map);

        polygon_center = bounds.getCenter();

in the js/core.js file (which is then minified for the version that’s served publicly).

Again, that really is all that’s needed to get the basic feature added, and having options added to the Polygon editor to enable & also style the label should be that much more work. I would love to see this added to the official version so I can keep my plugins up-to-date while retaining this very useful feature.

As an aside, I’ve also posted this to https://wordpress.org/support/topic/feature-proposal-add-ability-to-show-text-labels-within-polygons/ just in case there’s other users out there looking for this that haven’t checked this forum yet.

Thanks for the great plugin!
Kurt

[Perry]

Hi Kurt

Thank you so much for this and thanks for your kind words!

This looks great really, and we genuinely appreciate your contribution 🙂

I’ve added a note to our repo to get this looked at, I think it’s reasonable to say we’ll be able to merge this in in the short term future though.

We’ll have to review the code at some point but I can’t see any reason why this wouldn’t be added to the core plugin files shortly, please bear with us as our top priority at the moment is pushing out our new release, however we’ll look into this hopefully within a matter of weeks.

Thank you once again!

Kind regards
– Perry

[KZeni]

Great to hear! Let me know if I can help in any way to get this implemented.

Thanks!

[KZeni]

Okay, version 7 is out. Just want to give this another mention for potential inclusion in the new version’s codebase (didn’t see this listed anywhere on https://trello.com/b/Brsxoyzo/wp-google-maps, but I did see https://github.com/CodeCabin/wp-google-maps/issues/324 which seems relevant to this [though it didn’t link to this discussion]).

[Mike]

@KZeni I tried implementing your code above to get my polygon labels to appear, but all I seem to get is a JS error with core.js and the polygon hover functionality stops working.

Is the code above still working for you?

[KZeni]

It’s working (https://www.jmswank.com/about-us/sales-team/), but I have held off on upgrading to version 7 until this is implemented for the new version. Which version are you working with?

[Mike]

Ah that might be why I’m getting the errors. I’m using Version 7.06.

Which version are you using? And is there any way I can get access to the same version as you?

Wow, I like the info box you have on hover, how is that done with polygon’s?

• This reply was modified 5 years, 5 months ago by Mike.

[KZeni]

I have the latest version made available before the 7.x update which I had modified at the time (6.4.11 free with 6.19 pro) so you may find that https://wordpress.org/plugins/wp-rollback/ will help get you back to a compatible version of the free plugin whereas you may need to check your account / past downloads for the 6.x version of the pro plugin.

That being said, I see no reason why this code couldn’t be adapted to work with 7.x, but I just don’t have time set aside to handle that aspect myself since it’s working well on 6.x for now (hence why I proposed it being added officially).

The info box is actually https://wordpress.org/plugins/tabby-responsive-tabs/ which is set to change to the corresponding tab using what I outline here: https://www.wpgmaps.com/forums/topic/feature-proposal-add-hooks-to-specify-behavior-with-polygons-2/ (some additional work to get them to work together seamlessly needing to be done as well.)

[Mike]

Thanks @KZeni awesome info!

I only purchased this last night, so I only have access to v7 of Pro!

@Perry any chance of getting access to 6.19 pro?

[Perry]

Hi Mike, Hi Kzeni

May I firstly thank Kzeni for contributing to the forum, we really appreciate it 🙂

Mike, can you please submit a support ticket here: https://www.wpgmaps.com/contact-us/ stating you would like a copy of 6.19, please provide your purchase address so we can verify that and we’ll get a link out to you.

Kind regards
– Perry

[Mike]

Thanks Perry!

I have downloaded v6 and applied the same changes again, but the same issue persists:

ReferenceError: google is not defined
 /test/:197

ReferenceError: MapLabel is not defined
 /wp-content/plugins/wp-google-maps-pro/js/core.js:3036

However, if I use the uncompiled version of the google maplabel.js, I get slightly different errors:

ReferenceError: google is not defined
 /test/:198

TypeError: this.set is not a function
 /test/:197

At this point, I’m not quite sure how to proceed. I’m guessing there is no timeline for getting polygon labels officially released into v7?

[Author]

Posts