在Google Map Infowindow中获取Wordpress发布内容

Question

I have created a googlemaps based branches page, in which the places are created through a custom post type and a google map Advanced Custom Fields object.

the only problem is: if I want to have the content of the post inside the infoWindow (to show the location's details etc.) and the content have more then one line - the code breaks...

for example

this will work fine:

Lorem ipsum dolor sit amet, id malorum numquam per

but this will break:

Lorem ipsum dolor sit amet,
id malorum numquam per

this is the code for getting the location content:

        var locations = [<?php while( $wp_query->have_posts() ){
        $wp_query->the_post();
        $location = get_field('google_map'); 
        ?>
        //acf location's details array
        ['<h1><?php the_title(); ?></h1><h2><?php the_field('branch_name'); ?></h2><div id=<?php echo $post->ID; ?>><?php echo $post->post_content; ?></div>', 
        <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?>],
        <?php } ?> ];

and this is how I get it to the infowindow:

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
                for (var j = 0; j < markers.length; j++) {
                markers[j].setIcon("<?php echo get_template_directory_uri(); ?>/images/mapmarker.png");
            }
            marker.setIcon("<?php echo get_template_directory_uri(); ?>/images/mapmarker-active.png");
        };
    })(marker, i));

here is a codeshare link to the full template's code: http://www.codeshare.io/zaj6n

Answer 1

use json_encode to print strings which contain linebreaks(or characters that would be problematic in JS, eg quotes):

echo json_encode($post->post_content);

To avoid the double-quotes created by json_encode populate a PHP-array with the desired values and print the entire array by using json_encode :

(not tested)

<?php 
  $locations=array();
  while( $wp_query->have_posts() ){
        $wp_query->the_post();
        $location = get_field('google_map');
        $locations[]=array(the_title('<h1>','</h1>',false).
                             '<h2>'.get_field('branch_name').'</h2>'.
                             '<div id="'.$post->ID.'">'.$post->post_content.'</div>',
                           $location['lat'],
                           $location['lng'],
                           $NUM++
                           ); 
  }
  echo "\nvar locations=".json_encode($locations).";\n";

?>