Using wp_localize_script to get data from cpt and pass it to maplace-js locations

I’m currently building an Dealerlocator with ACF and CPT.

For the dealerlocator to shop the dealers on the map I want to use MAPlace-JS. This works fine when adding an array to the locations variable manually.

When passing data from my CPT it throws me an error:

Uncaught TypeError: Cannot assign to read only property ‘0’ of string.

This is the JSON array which is passed:

[{
“lat”:”52.5164364″,
“lng”:”6.073328800000013″,
“title”:”Company Name”,
“zoom”:8,
“icon”:”http://www.google.com/mapfiles/markerA.png”
},{
“lat”:”53.3354151″,
“lng”:”6.5032264999999825″,
“title”:”Company Name 2″,
“zoom”:8,
“icon”:”http://www.google.com/mapfiles/markerA.png”
}]

This is passed via the following script:

add_action(‘wp_enqueue_scripts’, function() {

global $post;
$args = array(
‘post_type’ => ‘dealers’
);

$mapposts = get_posts($args);
$location_array = array();

foreach($mapposts as $mappost) : setup_postdata($mappost);

$location = get_field(‘maps_location’, $mappost->ID);
$location_array[] = array(
‘lat’ => $location[‘lat’],
‘lng’ => $location[‘lng’],
‘title’ => get_the_title($mappost->ID),
‘zoom’ => 8,
‘icon’ => ‘http://www.google.com/mapfiles/markerA.png’
);

$location_json = json_encode($location_array);

wp_localize_script(‘sage/main.js’, ‘locationJSON’, $location_json);

endforeach;

}, 110);

And on the JS file called like this:

console.log(locationJSON);
new Maplace({
// eslint-disable-next-line no-undef
locations: locationJSON,
controls_type: ‘list’,
controls_on_map: false,
}).Load();

On the console.log it shows the JSON as above, so the code is passed ok.

But the code is not working within the Maps script, this is the error below.

Uncaught TypeError: Cannot assign to read only property ‘0’ of string ‘[{“lat”:”52.5164364″,”lng”:”6.073328800000013″,”title”:”Company Name”,”zoom”:8,”icon”:”http://www.google.com/mapfiles/markerA.png”},{“lat”:”53.3354151″,”lng”:”6.5032264999999825″,”title”:”Company Name 2″,”zoom”:8,”icon”:”http://www.google.com/mapfiles/markerA.png”}]’
at b._init (maplace.min.js:12)
at b.Load (maplace.min.js:12)
at Object.init (common.js:15)
at Router.fire (Router.js:30)
at Router.loadEvents (Router.js:45)
at HTMLDocument.<anonymous> (main.js:25)
at i (jquery-1.12.4.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2)
at Function.ready (jquery-1.12.4.min.js:2)
at HTMLDocument.K (jquery-1.12.4.min.js:2)
b._init @ maplace.min.js:12
b.Load @ maplace.min.js:12
init @ common.js:15
fire @ Router.js:30
loadEvents @ Router.js:45
(anonymous) @ main.js:25
i @ jquery-1.12.4.min.js:2
fireWith @ jquery-1.12.4.min.js:2
ready @ jquery-1.12.4.min.js:2
K @ jquery-1.12.4.min.js:2

I’m searching for this for ours now, but I’m not able to solve this thing.

Any ideas?

Read more here:: Using wp_localize_script to get data from cpt and pass it to maplace-js locations

Leave a Reply

Your email address will not be published. Required fields are marked *