Home Forums Front-end Issues ACF Google map custom styles field not rendering


ACF Google map custom styles field not rendering

  • Hello,

    I have an option page where i can create maps, i created a custom field to paste my own styles. What i need to do is pass this informations in my maps.js. What i have done is create an hidden div like this (i’m using timber) :

    <div class=”hidden” id=”map-styles”>{{ options.map_styles }}</div>

    Then in maps.js i get this informations like this :

    function initMap($el) {

    // Find marker elements within map.
    var $markers = $el.find(“.marker”);
    var styles = document.getElementById(“map-styles”).textContent;

    // Create generic map.
    var mapArgs = {
    zoom: $“zoom”) || 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: styles,

    But it’s not working, however if i’m doing a console.log(‘styles’), i see my code and if i paste my code directly in my js file it’s working so it’s not a code issue.
    Do you guys have any idea of how to solve this ? Is it a formting issue or something like that, I would really appreciate if you could put me on the right track.

    Have a good day.

  • Parse the styles string into proper JSON like:

    var styles = JSON.parse(document.getElementById('map-styles').textContent);

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘ACF Google map custom styles field not rendering’ is closed to new replies.