Now that I've changed one of my custom fields to an address field to use with Maps, I've noticed the class 'toolset-google-map-container' is used and contains:-
1. my address field
2. class .toolset-google-map-toggle-latlon (displays a Show/Hide Co-ordinates toggle)
3. class .toolset-google-map-use-visitor-location (displays a Use My Location link)
4. class .toolset-google-map-preview (displays a preview of the map based on the value entered in the address field)
I only want the address field to be displayed. If I add display:none to the CSS for the other 3 elements, I'm left with a unwanted '|' character on the page that I can't target.
My preferred approach is to not load the 3 unwanted elements in the first place. Is possible and how do I do it please?
Thank you!
Hi, I examined your request and it turns out none of our current APIs give you the ability to customize these address input options in a Form. Manipulating the DOM contents with JS isn't a good idea, because it breaks the location autosuggestion feature. The pipe character isn't wrapped in a tag, so the best thing I can think of is to use something like font-size:0 on the container element:
.toolset-google-map-inputs-container {
font-size: 0;
}
Combined with your CSS to hide the two links, this will tighten up the display for now. If you'd like to request more flexible control of this field as an improvement, I encourage you to submit a new ticket using the "Suggest an improvement" feature in the forums.
Hi Christian
Targeting the top level container like this means the contents of my address field are also not visible!
I have another idea I'm going to try to get round this. With the costs involved with maps, it's now particularly important that maps are displayed selectively and only when really necessary!
If your other idea does not work out, you can specify the font-size for the address input field like this:
.toolset-google-map-inputs-container {
font-size: 0;
}
.toolset-google-map-inputs-container input {
font-size: 12px;
}
The Twenty Seventeen theme already has a font-size applied to input elements, which overrides the font-size 0 applied to the parent container, but if your theme does not have a similar global input font size you can use the override above as a guide.
Thank you so much for coming back with this suggestion. This actually works very nicely because it hides the text/links but still displays the map (which can be hidden by targeting the appropriate CSS too if desired).
Awesome support, Christian, thank you!
