Google Maps API map doesn't appear
google-maps, google-maps-api-3, javascript
Solution
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% }
</style>
Problem
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { console.log("Initializing..."); 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"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="height: 100%; width: 100%;"></div> </body> </html> ``` Thanks for any help. I'm very confused!