I display map on whole page like this
<div id="map_canvas">
</div>
I try to show menu .. menu is display but also display immediately whereas i want menu display and when click anywhere then want to hide and now when i display map then menu not display
like this 
code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-o_Xf8Ki5ritxY2HRgMaaOpEyLgR5msc&sensor=false"></script>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>
<div id="map_canvas">
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#btnmenu').click(function () {
$('#menu').show();
});
});
</script>
<script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker
(
{
position: new google.maps.LatLng(-34.397, 150.644),
map: map,
title: 'Click me'
}
);
var infowindow = new google.maps.InfoWindow({
content: 'Location info:<br/>Country Name:<br/>LatLng:'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}
window.onload = initialize;
</script>
