leaflet : Map container is already initialized does not get solved by proposed answers
<p>I am trying to load a map by using leaflet. when i refresh the map, I get the above error. I studied other proposed answers for this question. But, non of them worked for me.
I am trying to load a map inside a function which is run by a onclick event. Here is the code: </p>

<pre><code>function load_map_and_analyze_data(){
var mymap = L.map('mapid',{ center: new L.LatLng(the_center_splitted[0],the_center_splitted[1]),maxZoom: 17, minZoom:11, zoom: 14}); //creating the map
//the rest of analyze and code goes here
}
</code></pre>

<p>The tested proposed answers:<br>
1- Check if my map is initialized, if yes remove it, and define it once again.</p>

<pre><code>console.log(mymap);
if(mymap != 'undefined' || mymap != null) {
 mymap.remove(); 
} 
</code></pre>

<p>Result: mymap is undefined whenever i refresh the function and just the same error.<br>
2- Defining this variable as a general variable outside of function just when mapdiv dom is ready. then i used jquery.</p>

<pre><code>$( "#mapid" ).load(function() {
  var mymap= L.map('mapid');
});
</code></pre>

<p>Result: this error: Map container not found.<br>
3- Removing the mydiv dom and just trying to recreate it inside of the function.</p>

<pre><code>console.log(mymap);
if(mymap != undefined || mymap != null){
    mymap.remove();
   $("#mapdiv").html("");
   $( "&lt;div id=\"mapdiv\" style=\"height: 500px;\"&gt;&lt;/div&gt;" ).appendTo(document);
}
</code></pre>

<p>Result: mymap is undefined and just the code has not run to test its efficiency.<br>
Any idea or suggestion is appreciated. Thank you.</p>