MapAPI inside lightbox

by freedawirl

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<button id="show">Show map</button>
    <div class="overlay">
      <div id="map-canvas" class="center"></div>
      <div class="overlay-bg"></div>
    </div>

CSS

#map-canvas {
  width: 600px;
  height: 500px;
  border: 10px solid #000;
  border-radius: 15px;
  box-shadow: 0 0 17px rgba(0,0,0,5);
  z-index: 12
}

#show { padding: 1em; font-size: 1.2em; }

.overlay {
  position: fixed;
  top: 0; 
  left: 0;
  z-index: 10;
  background-color: rgba(0,0,0,0.5);
  width: 100%; 
  height: 100%;
  display: none;
}

.overlay-bg {
  background-color: rgba(0,0,0,0.5);
  width: 100%; 
  height: 100%;
  z-index: 11;
}

.center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.show { display: block; }

JavaScript

jQuery(function($){

  var $overlay = $('.overlay'),
      resize = true,
      map;
  
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
 
}

google.maps.event.addDomListener(window, 'load', initialize);

$('#show').click(function(){

    $overlay.show();
    
  if ( resize ){
    google.maps.event.trigger(map, 'resize');
    resize = false;
  }
  
});

$('.overlay-bg').click(function(){

    $overlay.hide();
  
});
  
});