jQuery + google maps + Elevation

playing with google maps v3 events, jQuery, icons from http://google-maps-icons.googlecode.com

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
Toggle doesnt display correctly
<div class="click">
  <div class="hide">
    <div id="map" style="width:300px;height:140px;"></div>
  </div> 
</div>


Normal looks like:
  <div id="mapz" style="width:300px;height:140px;"></div>

CSS

body{
    margin:20px;
   
}
.click{
    cursor:pointer;
    padding:20px;
    width:300px;
    background:orange;
}
.hide{
    height:140px;
    background: yellow;
}

JavaScript

$('.hide').hide();
$('.click').click(function(){
    var $this = $(this);
    $this.find('.hide').slideToggle();
})
function initialize() {
	    var latlng = new google.maps.LatLng(48.89376,2.33742); 
   	    var settings = {
	    	zoom: 15,
	        center: latlng,
	        disableDefaultUI: true,
            zoomControl: true,
        	mapTypeId: google.maps.MapTypeId.ROADMAP
		};
         
		var map = new google.maps.Map(document.getElementById("map"), settings);
        var marker=new google.maps.Marker({
	          position:latlng,
	          });
		 marker.setMap(map);
    
    
    //MAP 2
    
        var latlngz = new google.maps.LatLng(48.89376,2.33742); 
   	    var settingsz = {
	    	zoom: 15,
	        center: latlngz,
	        disableDefaultUI: true,
            zoomControl: true,
        	mapTypeId: google.maps.MapTypeId.ROADMAP
		};
         
		var mapz = new google.maps.Map(document.getElementById("mapz"), settingsz);
        var markerz =new google.maps.Marker({
	          position:latlngz,
	          });
		 markerz.setMap(mapz);
       
    
    }
google.maps.event.addDomListener(window, 'load', initialize);