[FR] Make the maps interface available for front-end forms.

[MattWilcox]

We have a site with Members, who can edit their profiles through a front-end form. Those members need to add in addresses; and in exactly the same way that the UI is so helpful in the backend, it'd be just as useful on the front end.

[alexjcollins]

Hi @MattWilcox - great suggestion! We actually have a whole bunch of updates and improvements in the works, specifically to boost the functionality of Maps on the front-end. Will let you know when something's available to play with.

[shornuk]

We've used Maps since it was available in C3 and prior to 3.4 update we would just register the fields JS in the front end field like so...

{% do view.registerJsFile(alias('@baseUrl') ~ '/build/resources/js/simplemap.js') %}
{% js %}
    new SimpleMap('{{ craft.simpleMap.apiKey }}', '{{ id }}', {
        lat: '{{ value.lat ?? craft.app.config.general.custom.defaultMapLat }}',
        lng: '{{ value.lng ?? craft.app.config.general.custom.defaultMapLng }}',
        zoom: '{{ value.zoom ?? craft.app.config.general.custom.defaultMapZoom }}',
        height: '{{ height }}',
        hideMap: {{ 'map' in show ? 'false' : 'true' }},
        type: '',
        boundary: ''
    }, '');
{% endjs %}

This doesn't work in 3.4 onwards, presumably down the new Vue interface. Any easy way to accomplish something similar? We were thinking of doing our own front end map field, but might hold off if something is in the works?

[Tam]

It will be possible (in the next release) to use:

{{ craft.app.fields.getFieldByHandle('myMapFieldHandle').getInputHtml(optionalMapValue)|raw }}

But bare in mind that the field requires some Craft specific JS, so will include all the CP JS and CSS. I'll mark this as a feature request so in the future we can look at uncoupling the field from Craft's JS.

[bhashkar007]

It will be possible (in the next release) to use:

{{ craft.app.fields.getFieldByHandle('myMapFieldHandle').getInputHtml(optionalMapValue)|raw }}

But bare in mind that the field requires some Craft specific JS, so will include all the CP JS and CSS. I'll mark this as a feature request so in the future we can look at uncoupling the field from Craft's JS.

Please let me know if this feature is available now because I can't see in doc. Also, what will be values for optionalMapValue

[Tam]

@bhashkar007 We don't have a clean way to output a map field on the front-end yet, but you can use the Twig shown above as a temporary way of doing it.

The optionalMapValue is a Map field, i.e. getInputHtml(entry.myMapField).