Bdtjtk

Below is the function which call on onclick event

function drawMapFromWms(latt,longt){    



  document.getElementById('hrymap').innerHTML = "";      



     document.getElementById('hrymap').innerHTML = "<div id='map'></div>";

      map = L.map('map').setView([29.0,76.776695], 8);   





                 L.tileLayer.wms("http://example.com", {

             layers:'india3',



       format: 'image/png',

        transparent: true,

       attribution:"dummy"



    }).addTo(map);



          L.tileLayer.wms("http://example.com", {

             layers:'hrcm_roads',



       format: 'image/png',

        transparent: true,

       attribution:"dummy"



    }).addTo(map);



     var marker = L.marker([latt,longt]).addTo(map);



     $("#detail_content").css({'display':'block'});





  }

Here is the modal div which map div created

<div id="detail_content" class="w3-modal">

    <div class="w3-modal-content">

      <div class="w3-container">

        <span onclick="document.getElementById('detail_content').style.display='none'" class="w3-button w3-display-topright">&times;</span>

        <div class="modal-info">

          <div id="hrymap">

    </div>

        </div>

      </div>

    </div>

  </div>

</div>

And finally function is call

Problem is when i click the button the map is loaded partially like below image

and after inspect element it will loaded fully like below image.

As it is created on the fly, your map may not be aware of the size of its container.

Try

map.invalidateSize();

You are not initializing the map correctly. You never set the center. Pass a map options argument as your second argument. Should be like:

var map = L.map('map', {center:[29.0, 76.776695], zoom:8});

Here's the docs.

After reading your comment, I believe that it's because the CSS associated with the HTML class attribute is overriding your less specific CSS. Personally, I would just use more specific CSS, like:

div.modal-info>div#hrymap>div#map.leaflet-container{

  width:868px; height:650px;

}

instead of

#map{

  width:868px; height:650px;

}

By the way

document.getElementById('hrymap').innerHTML = "";      

and

document.getElementById('hrymap').innerHTML = "<div id='map'></div>";

are both assignment. Why do the first one? And why not $('#hrymap').html("<div id='map'></div>")? When using jQuery, just use it.

If the CSS way doesn't work, try:

$("<div id='map'></div>").appendTo('#hrymap').css({width:'868px', height:'650px'});

Keep in mind that when using using .appendTo(), following jQuery methods will effect the jQuery selector before .appendTo(), while jQuery methods following append() would effect the append().

Of course, once again, you should create the HTML structure as much as you can, without using JavaScript. Only do things on the fly when you have to.

setTimeout(function(){ map.invalidateSize(true)}, 300);