[Resolved] How to add custom markers to a map

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 7.15 hours from now. Thank you for your understanding.

This thread is resolved. Here is a description of the problem and solution.

Problem: How can we add our custom Markers to a Map?

Solution: You can add custom markers both in the Toolset > Settings > Maps section or when inserting Markers as ShortCodes.

Refer to the DOC linked below for more details and pay attention to the sizes of the images you upload as markers. SVG will be resized by Toolset, while all other formats will not be resized by Toolset. The ideal size of a marker is 32x32 pixels

Relevant Documentation:

https://toolset.com/documentation/user-guides/maps/display-on-google-maps/displaying-markers-on-google-maps/#marker-icon

This topic contains 8 replies, has 2 voices.

Last updated by richardG-4 3 weeks, 4 days ago.

Assigned support staff: Beda.

Author
Posts
#1477167

Tell us what you are trying to do?
I have this mostly setup, but there seem to be a few bugs. One is that if I use a custom marker (it's a jpeg image), the marker shows up WAY too big.

The other bug is that the map size is not the right size. It seems to be stuck at 250px instead of 400px. This may be because I built the page with Elementor? I was able to solve this with some CSS, but it seems like a bug that the size isn't working from Toolset.

What is the link to your site?
hidden link

#1477825

Beda
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

We recommend using transparent PNG or GIF format so the map is visible underneath the marker icon. We also recommend using icons which have dimensions of 32 by 32 pixels. While the marker icons are not resized during the upload process they are scaled to 32 by 32 pixels when displayed on the map.
https://toolset.com/documentation/user-guides/maps/display-on-google-maps/displaying-markers-on-google-maps/#marker-icon

But that's not what's happening, as I see now.

If we upload a greater than specified Icon (not ideal, but also not disallowed, according to the Doc), the GUI will show it properly resized but the front end will show a width: 300px; height: 152px; sized marker.

It should resize to 32x32

We've had issues with this in past, I'll report it. Meanwhile, you should be able to pre-create the icons with the suggested size and use those.
That's better anyway, it will save a bit of loading time

#1477961

The image was sized at 40px, I resized it to 32px as you recommended.

I wondered if it had to do with Smush optimizing the image, but when I tried un-optimizing the image it didn't work either. Here is a link of what the map looks like when I use the custom image:

hidden link

And here is my code:

[wpv-map-render map_id="map-1" height="400px" marker_icon="//ironcountygop.org/wp-content/uploads/2020/01/ironcountygoplogo-tiny.png" background_color="#061838" cluster="on"][/wpv-map-render]
#1477963

Beda
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Yes, as I mentioned, I can replicate the issue.
I meanwhile already escalated this to the 2nd tier who will pass it to the developers.

Currently, you'll have to use already resized images/icons

#1477965

Oh you mean use the default icons, I can do that for now, thanks.

#1477969

Beda
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

No, I mean to create icons that are properly sized according to the Google Maps guidelines, that is 32x32 pixel.
Maps DOC says that Toolset Maps scales them for us, but this is not what's happening, so we need to upload already properly scaled custom markers.

Does that make sense?

Once the Developers will look at this, we will either fix the issue in the plugin or maybe it turns out the DOC is wrong, which then would mean we will update the doc.

Thanks!

#1478237

Beda
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

OK so debugging this I can see that we do only rescale SVG images on the front end.
All others are not rescaled.

You'd need to upload 32x32 images OR SVG files in any size.

I've asked to update the Documentation so this is clear.

Please let me know if there are further issues I can help with

#1482347

Beda
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

We updated the DOC accordingly:
https://toolset.com/documentation/user-guides/maps/display-on-google-maps/displaying-markers-on-google-maps/#marker-icon

This should be resolved with the more precise guideline

#1483219

My issue is resolved now. Thank you for clarification!