0

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 hours now, but I'm not able to solve this thing.

Any ideas?

2

You don't need to use json_encode() when using wp_localize_script(). The last argument of wp_localize_script() should be a PHP array. This will be converted to JSON for you.

So to resolve the issue, remove this line:

$location_json = json_encode($location_array);

And change wp_localize_script() to use $location_array:

wp_localize_script('sage/main.js', 'locationJSON', $location_array);

Because $location_array had been double-encoded the locationJSON variable was actually just a text string that looked like JSON. So when the Maplace script tried to access the first element of the array with locationJSON[0] it failed because the locationJSON variable was not actually an Array.

  • This shows me at least the MAPlace locations. But the complete site is not responding anymore and google maps is crashing (it won't load the actual map). I use link the Menu variant. – Wouter Aug 8 '18 at 6:30
  • That would be unrelated to anything you've asked about here, or my answer. – Jacob Peattie Aug 8 '18 at 7:18
  • Well, that's my question... How am I able to fix it. It does work with the example array from maplace-js – Wouter Aug 8 '18 at 8:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.