title: leaflet : Map container is already initialized does not get solved by proposed answers
body: <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>