gistfile1.html

<button id='stop'>stop</button>
<button id='start'>start</button>
<div id='count'></div>
<div id="shell">
</div>
<script
  src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA_OZRpMaskOiOyodu5PQSbFKrY5hjFRxY&sensor=false"></script>
<script>
  var mapMarkup = '<div id="map" style="width: 200px; height: 200px;">loading</div>';
  
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var makeMap = function(){
    window.mapInstance = new google.maps.Map(document.getElementById("map"), myOptions);
    c += 1;
    document.getElementById("count").textContent = c;
  };
  
  var c = 0;
  var loop = false;

  document.getElementById("start").onclick = function(){
    if (!loop){
      // every second, either make or hide the map
      loop = setInterval(function(){
        if (document.getElementById("map")){
          document.getElementById("shell").innerHTML = '';
          delete window.mapInstance;
        } else {
          document.getElementById("shell").innerHTML = mapMarkup;
          makeMap();
        }
      }, 100);
    }
  };

  document.getElementById("stop").onclick = function(){
    if (loop){
      clearInterval(loop);
      console.log('stopped after: ' + c);
    }
  };

</script>