I have the following code in an web page.

<html>
<input id="btnHoleShow" type="button" value="Show Image" onclick="displayMap();" class="btnDefault" />
<div id="map_canvas" style="display: none; z-index: 3000; width:700px; height:500px; margin-left:80px;">
</html>

<script type="text/javascript" language="javascript">
function displayMap()
{
var mapRef = document.getElementById('map_canvas');
if (mapRef.style.display == 'none')
{
mapRef.style.display = "block";
initialize();
}
else
mapRef.style.display = "none";
return false;
}
function initialize()
{
// create the map
var myOptions =
{
zoom: 14,
center: new google.maps.LatLng(0.0, 0.0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canva s"),
myOptions);

}
</script>

I don't get an error, the div flips between being display and not, but no google maps showing. What am I doing wrong?

Thanks!