Hover to show Map

Show google map on hover event.

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="hoverbtn" class="button">Show Map</div>
<div id="map"></div>

CSS

#map{
    width: 450px;
    height: 400px;
    display:none;
}
.button{
    height:30px;
    width:40px;
    padding: 10px 15px 10px 15px;
    margin-bottom: 50px;
    border: 1px solid black;
    background:black;
    color:white;
}

JavaScript

function initialize() {
    var map;
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
    var options = {
        zoom: 6,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);
    
    $('#hoverbtn').hover(function(){
       $('#map').show(); 
       google.maps.event.trigger(map, 'resize');
    });
    
}

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