Google Maps API map doesn't appear [duplicate]

I can't get my map to appear when I'm using the Google Maps API. I am trying to build an application, and it won't work there, but it is also broken in this testing page I've made. Does anyone know what it is that I'm doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
function initialize() {
  var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    var map = new google.maps.Map(document.getElementById("map_canvas"),

<body onload="initialize()">
<div id="map_canvas" style="height: 100%; width: 100%;"></div>

Thanks for any help. I'm very confused!

Give your map_canvas div a fixed width and height, and your example will work fine:

<div id="map_canvas" style="width: 500px; height: 400px;"></div>

Otherwise, set the height to your html and body as Google does in the API tutorials:

<style type="text/css"> 
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }

You might wanna make some custom CSS for that div that contains the map. i did the below coding in my css.. Hope it helps :D cheers !!

/*    padding:5px;*/
    width: 155px;
    height: 123px;
    background-repeat: no-repeat;
    padding-top: 4px;
    padding-left: 4px;
    width: 146px;
    height: 114px;
    width: 100%;
    height: 120px;

it seems like it is not showing up on my client's live site as well. It was working up until couple of days ago. Perhaps google updated js and something broken? Because nothing changed on my side...