ACF Google map custom styles field not rendering

• loicdelahais

• April 29, 2020 at 7:34 pm

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: $el.data(“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.

• benw

• May 8, 2020 at 1:34 am

Parse the styles string into proper JSON like:

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