Here is a test fiddle: my fiddle: https://jsfiddle.net/blogob/qtou84Lj/23/

I'm trying to build a full width map in a wordpress site with leaflet.

My goal is to dsplay all post with markers on the map. When i click on the marker, a sidebar appear with the corresponding content in it. It's working.

But i have a problem that i can't solve. we can see it in the fiddle, when i move the map, i can see "the content" behind the map. so i have it in the sidebar and also on the page, behind the map. In my wordpress site it's the same : my post contain a title, a video and a description. When i hover the map, in some place i can click on the video that is behind the map and it redirects me to youtube.. so it's a huge problem for me. Is it better to display content via data attributes, i tryed but without success. if i put the content in a data attribute, the map doen't appear in the page. i don't understand why the post are duplicated..

2 Answers 2


All you have to do is to escape it correctly.

In your code you escape the excerpt using esc_html, but you put it in the attribute - so it isn’t secure and it can break your site.

You should use esc_attr to escape attributes. Then you can put content too:

data-content="<?php echo esc_attr( get_the_content() ); ?>"
  • thank you very much for your quick answer, but it doens't work, i get a blank page..i edited my question..
    – blogob
    Jan 19, 2019 at 14:20
  • @blogob it’s hard to guess what’s wrong without knowing how your code looks now. Jan 19, 2019 at 14:22
  • i edited again my question, with a link to a fiddle to show my problem.
    – blogob
    Jan 19, 2019 at 16:23

ok i finally managed to do it. in my php file, for the leaflet map :

<div id="mapid">
          // Default arguments
         if ( have_posts() ) : ?>
                            /* Start the Loop */
                            while ( have_posts() ) : the_post();
        $lat = get_post_meta( $post->ID, 'lat', true );
        $lng = get_post_meta( $post->ID, 'lng', true );
        $content = ob_get_clean();
        <div class="marker"  data-url="<?php the_permalink(); ?>"  

            data-lat="<?php echo $lat; ?>" 
            data-lng="<?php echo $lng; ?>"
            data-content="<?php echo esc_attr($content); ?>">

    // Reset post data
     <?php endif; ?>
    <div id="sidebar">

i tryed the solution suggested here:

data-content="<?php echo esc_attr( get_the_content() ); ?>"

but get_the_content() doesn't auto-embed videos. if i try with "the_content'

data-content="<?php echo esc_attr( get_the_content() ); ?>"


<div class="marker"  data-url="<?php the_permalink(); ?>"  

            data-lat="<?php echo $lat; ?>" 
            data-lng="<?php echo $lng; ?>"

it duplicates my post on the page and on the map. so the last solution only allows me to display the map and markers without duplicating the posts, and let me display content correctly in the sidebar

In the js file :

  $('.marker').each(function() {

    var lat = $(this).attr('data-lat')
    var lng = $(this).attr('data-lng')
    var text = $(this).attr('data-content')
    var sidebar =$('#sidebar')
    var marker = new L.marker([ lat, lng ]).addTo(map)



i had also to specify a height of 100% to all my containers in the page, because without that, i had a blank page. Thank you Krzysiek Dróżdż for your help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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